<template>
  <div
    id="app"
    style="
      background: #ffffff !important;
      height: auto !important;
      padding-bottom: 20px;
    "
  >
    <!-- 标题 -->
    <div class="title">{{ titleTxt }}</div>

    <!-- tab项 -->
    <div class="flex-row pb100 positionRe">
      <van-tabs
        v-model="active"
        color="#357FFF"
        title-active-color="#357FFF"
        title-inactive-color="#899CAC"
        @change="changeTab"
        slot="nav-right"
        animated
      >
        <van-tab v-for="(item, index) in tabArr" :title="item" :key="index">
          <div class="flex_col">
            <div>
              <van-swipe class="my-swipe" indicator-color="white" :loop="false">
                <van-swipe-item class="flex_row">
                  <!-- 第一块 -->
                  <div class="flex1 flex_col pdt20" style="margin-left: 8%">
                    <div class="block1 flex_col">
                      <div class="blockt1">累计发电|千瓦时</div>
                      <div class="blockt2">2530</div>
                      <div>
                        <label class="blockt3">同比</label
                        ><label class="blockt4">3.14 ⬆</label>
                      </div>
                    </div>

                    <div class="block1 flex_col">
                      <div class="blockt1">累计发电|千瓦时</div>
                      <div class="blockt2">2530</div>
                      <div>
                        <label class="blockt3">同比</label
                        ><label class="blockt4">3.14 ⬆</label>
                      </div>
                    </div>
                  </div>

                  <!-- 第二块 -->
                  <div class="flex1 flex_col pdt20">
                    <div class="block1 flex_col">
                      <div class="blockt1">累计发电|千瓦时</div>
                      <div class="blockt2">2530</div>
                      <div>
                        <label class="blockt3">同比</label
                        ><label class="blockt4">3.14 ⬆</label>
                      </div>
                    </div>

                    <div class="block1 flex_col">
                      <div class="blockt1">累计发电|千瓦时</div>
                      <div class="blockt2">2530</div>
                      <div>
                        <label class="blockt3">同比</label
                        ><label class="blockt4">3.14 ⬆</label>
                      </div>
                    </div>
                  </div>
                </van-swipe-item>
                <van-swipe-item>2</van-swipe-item>
                <van-swipe-item>3</van-swipe-item>
                <van-swipe-item>4</van-swipe-item>
              </van-swipe>
            </div>
            <div v-if="showOne" class="flex_col">
              <div class="flex_row">
                <div class="echartTitle">{{ showOneTxt }}</div>
                <div class="flex1"></div>
              </div>
              <div v-if="active == 0" class="flex_col whiteBg mt20">
                <div class="info0-1 flex_col flex_ji_cen">
                  <div class="txt0-1">500kv阿拉善盟变电站</div>

                  <div class="flex1 flex_row ml15 mt8">
                    <div class="txt0-2 flex3">
                      变电容量(MVA) <label>1000</label>
                    </div>
                    <div class="line2"></div>
                    <div class="txt0-2 flex2 ml5">
                      负载率(%)<label class="ml5">92</label>
                    </div>
                    <div class="line2"></div>
                    <div class="flex3 ml5">
                      预警类型<label class="txt0-3 ml5">负载过重</label>
                    </div>
                  </div>
                </div>
              </div>
              <div :id="`main${index}${index}1`" class="allEchart"></div>
            </div>

            <div v-if="showTwo" class="flex_col">
              <div class="flex_row">
                <div class="echartTitle">{{ showTwoTxt }}</div>
                <div class="flex1"></div>
              </div>
              <div v-if="active == 7" class="flex_col whiteBg mt20">
                <div class="info1 flex_row flex_ji_cen">
                  <div class="flex1 flex_col">
                    <div class="txt1">电力生产弹性系数</div>
                    <div class="flex_row">
                      <div class="txt2">0.98</div>
                      <div class="txt3">同比</div>
                      <div class="txt4">3.14 ↑</div>
                    </div>
                  </div>
                  <div class="line"></div>
                  <div class="flex1 flex_col">
                    <div class="txt1">电力消费弹性系数</div>
                    <div class="flex_row">
                      <div class="txt2">1.22</div>
                      <div class="txt3">同比</div>
                      <div class="txt4">3.14 ↑</div>
                    </div>
                  </div>
                </div>
              </div>
              <div :id="`main${index}${index}2`" class="allEchart"></div>

              <div
                v-if="active == 6"
                :id="`extraEchart1${index}${index}2`"
                class="allEchart"
              ></div>
            </div>

            <div v-if="showThree" class="flex_col">
              <div class="flex_row">
                <div class="echartTitle">{{ showThreeTxt }}</div>
                <div class="sixTxt p20">{{ showThreeTxt2 }}</div>
                <div class="flex1"></div>
              </div>
              <div v-if="active == 7" class="flex_col whiteBg mt20">
                <div class="info1 flex_row flex_ji_cen">
                  <div class="flex1 flex_col">
                    <div class="txt1">电力生产弹性系数</div>
                    <div class="flex_row">
                      <div class="txt2">0.98</div>
                      <div class="txt3">同比</div>
                      <div class="txt4">3.14 ↑</div>
                    </div>
                  </div>
                  <div class="line"></div>
                  <div class="flex1 flex_col">
                    <div class="txt1">电力消费弹性系数</div>
                    <div class="flex_row">
                      <div class="txt2">1.22</div>
                      <div class="txt3">同比</div>
                      <div class="txt4">3.14 ↑</div>
                    </div>
                  </div>
                </div>
              </div>
              <div :id="`main${index}${index}3`" class="allEchart"></div>
            </div>

            <div v-if="showFour" class="flex_col">
              <div class="flex_row">
                <div class="echartTitle">{{ showFourTxt }}</div>
                <div class="sixTxt p20">{{ showFourTxt2 }}</div>
                <div class="flex1"></div>
              </div>
              <div v-if="active == 7" class="flex_col whiteBg mt20">
                <div class="info1 flex_row flex_ji_cen">
                  <div class="flex1 flex_col">
                    <div class="txt1">电力生产弹性系数</div>
                    <div class="flex_row">
                      <div class="txt2">0.98</div>
                      <div class="txt3">同比</div>
                      <div class="txt4">3.14 ↑</div>
                    </div>
                  </div>
                  <div class="line"></div>
                  <div class="flex1 flex_col">
                    <div class="txt1">电力消费弹性系数</div>
                    <div class="flex_row">
                      <div class="txt2">1.22</div>
                      <div class="txt3">同比</div>
                      <div class="txt4">3.14 ↑</div>
                    </div>
                  </div>
                </div>
              </div>
              <div :id="`main${index}${index}4`" class="allEchart"></div>
            </div>

            <div v-if="showFive" class="flex_col">
              <div class="flex_row">
                <div class="echartTitle">{{ showFiveTxt }}</div>
                <div class="sixTxt p20">{{ showFiveTxt2 }}</div>
                <div class="flex1"></div>
              </div>
              <div v-if="active == 6" class="flex_col whiteBg mt20">
                <div class="info1 flex_row flex_ji_cen">
                  <div class="flex1 flex_col">
                    <div class="txt1">扶贫电站丨个</div>
                    <div class="txt2">1133</div>
                  </div>
                  <div class="line"></div>
                  <div class="flex1 flex_col">
                    <div class="txt1">扶贫投资金额丨亿元</div>
                    <div class="txt2">13.7</div>
                  </div>
                </div>
                <div class="info1 flex_row flex_ji_cen">
                  <div class="flex1 flex_col">
                    <div class="txt1">扶贫用户丨户</div>
                    <div class="txt2">76543</div>
                  </div>
                  <div class="line"></div>
                  <div class="flex1 flex_col">
                    <div class="txt1">扶贫电站容量丨万千瓦</div>
                    <div class="txt2">133</div>
                  </div>
                </div>
              </div>
              <div v-else>
                <div v-if="active == 7" class="flex_col whiteBg mt20">
                  <div class="info1 flex_row flex_ji_cen">
                    <div class="flex1 flex_col">
                      <div class="txt1">电力生产弹性系数</div>
                      <div class="flex_row">
                        <div class="txt2">0.98</div>
                        <div class="txt3">同比</div>
                        <div class="txt4">3.14 ↑</div>
                      </div>
                    </div>
                    <div class="line"></div>
                    <div class="flex1 flex_col">
                      <div class="txt1">电力消费弹性系数</div>
                      <div class="flex_row">
                        <div class="txt2">1.22</div>
                        <div class="txt3">同比</div>
                        <div class="txt4">3.14 ↑</div>
                      </div>
                    </div>
                  </div>
                </div>
                <div :id="`main${index}${index}5`" class="allEchart"></div>
              </div>
            </div>

            <div v-if="showSix" class="flex_col">
              <div class="flex_row w100">
                <van-tabs
                  v-model="activeSix1"
                  color="#357FFF"
                  title-active-color="#357FFF"
                  title-inactive-color="#899CAC"
                  @change="changeTabSix1"
                  slot="nav-right"
                  animated
                  class="w100"
                >
                  <van-tab :title="showSixTxt">
                    <div v-if="active == 7" class="flex_col whiteBg mt20">
                      <div class="info1 flex_row flex_ji_cen">
                        <div class="flex1 flex_col">
                          <div class="txt1">电力生产弹性系数</div>
                          <div class="flex_row">
                            <div class="txt2">0.98</div>
                            <div class="txt3">同比</div>
                            <div class="txt4">3.14 ↑</div>
                          </div>
                        </div>
                        <div class="line"></div>
                        <div class="flex1 flex_col">
                          <div class="txt1">电力消费弹性系数</div>
                          <div class="flex_row">
                            <div class="txt2">1.22</div>
                            <div class="txt3">同比</div>
                            <div class="txt4">3.14 ↑</div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div :id="`main${index}${index}6`" class="allEchart"></div>
                  </van-tab>
                  <van-tab :disabled="showSixTxt2Click" :title="showSixTxt2">
                    <div v-if="active == 7" class="flex_col whiteBg mt20">
                      <div class="info1 flex_row flex_ji_cen">
                        <div class="flex1 flex_col">
                          <div class="txt1">电力生产弹性系数</div>
                          <div class="flex_row">
                            <div class="txt2">0.98</div>
                            <div class="txt3">同比</div>
                            <div class="txt4">3.14 ↑</div>
                          </div>
                        </div>
                        <div class="line"></div>
                        <div class="flex1 flex_col">
                          <div class="txt1">电力消费弹性系数</div>
                          <div class="flex_row">
                            <div class="txt2">1.22</div>
                            <div class="txt3">同比</div>
                            <div class="txt4">3.14 ↑</div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div :id="`main${index}${index}62`" class="allEchart"></div>
                  </van-tab>
                </van-tabs>
                <!-- <div class="echartTitle">{{ showSixTxt }}</div>
                <div class="sixTxt p20">{{ showSixTxt2 }}</div>
                <div class="flex1"></div> -->
              </div>
              <!-- <div v-if="active==7" class="flex_col whiteBg mt20">
                  <div class="info1 flex_row flex_ji_cen">
                    <div class="flex1 flex_col">
                      <div class="txt1">电力生产弹性系数</div>
                      <div class="flex_row">
                        <div class="txt2">0.98</div>
                        <div class="txt3">同比</div>
                        <div class="txt4">3.14 ↑</div>
                      </div>
                      
                    </div>
                    <div class="line"></div>
                    <div class="flex1 flex_col">
                      <div class="txt1">电力消费弹性系数</div>
                      <div class="flex_row">
                        <div class="txt2">1.22</div>
                        <div class="txt3">同比</div>
                        <div class="txt4">3.14 ↑</div>
                      </div>
                    </div>
                  </div>
                </div>
              <div :id="`main${index}${index}6`" class="allEchart"></div> -->
            </div>

            <div v-if="showSeven" class="flex_col">
              <div class="flex_row">
                <div class="echartTitle">{{ showSevenTxt }}</div>
                <div class="sixTxt p20">新能源装机容量</div>
                <div class="flex1"></div>
              </div>
              <div v-if="active == 7" class="flex_col whiteBg mt20">
                <div class="info1 flex_row flex_ji_cen">
                  <div class="flex1 flex_col">
                    <div class="txt1">蒙东市场释放红利丨亿元</div>
                    <div class="txt2">345678</div>
                  </div>
                  <div class="line"></div>
                  <div class="flex1 flex_col">
                    <div class="txt1">蒙西市场释放红利丨亿元</div>
                    <div class="txt2">367678</div>
                    <div class="flex_row"></div>
                  </div>
                </div>
              </div>
              <div :id="`main${index}${index}7`" class="allEchart"></div>
            </div>

            <div v-if="showEight" class="flex_col">
              <div class="flex_row">
                <div class="echartTitle">{{ showEightTxt }}</div>
                <div class="flex1"></div>
              </div>
              <div v-if="active == 7" class="flex_col whiteBg mt20">
                <div class="info1 flex_row flex_ji_cen">
                  <div class="flex1 flex_col">
                    <div class="txt1">蒙东市场释放红利丨亿元</div>
                    <div class="txt2">345678</div>
                  </div>
                  <div class="line"></div>
                  <div class="flex1 flex_col">
                    <div class="txt1">蒙西市场释放红利丨亿元</div>
                    <div class="txt2">367678</div>
                    <div class="flex_row"></div>
                  </div>
                </div>
              </div>
              <div :id="`main${index}${index}8`" class="allEchart"></div>
            </div>

            <div v-if="showNine" class="flex_col">
              <div class="flex_row">
                <div class="echartTitle">{{ showNineTxt }}</div>
                <div class="flex1"></div>
              </div>
              <div :id="`main${index}${index}9`" class="allEchart"></div>
            </div>

            <div v-if="showTen" class="flex_col">
              <div class="flex_row">
                <div class="echartTitle">{{ showTenTxt }}</div>
                <div class="sixTxt p20">GDP贡献率</div>
                <div class="flex1"></div>
              </div>
              <div :id="`main${index}${index}10`" class="allEchart"></div>
            </div>

            <!-- -- -->
          </div>
        </van-tab>
      </van-tabs>

      <div class="menuImg" @click="showMenu">
        <img src="../assets/images/menu.png" alt="" />
      </div>
    </div>

    <!-- 底部 -->
    <section class="bottom">
      <div class="flex active">
        <router-link :to="{ path: '/chart' }">
          <i class="icon-home icon"></i>
          <span class="txt">业务管理</span>
        </router-link>
      </div>
      <div class="flex">
        <router-link :to="{ path: '/businessManage' }">
          <i class="icon-order icon"></i>
          <span class="txt">分析系统</span>
        </router-link>
      </div>
      <div class="flex">
        <router-link :to="{ path: '/personalCenter' }">
          <i class="icon-my icon"></i>
          <span class="txt">我的</span>
        </router-link>
      </div>
    </section>

    <van-popup
      v-model="showPop"
      position="top"
      closeable
      :style="{ 'margin-top': '15%' }"
      :overlay-style="{ 'margin-top': '15%' }"
    >
      <div class="popTitle">全部</div>
      <div class="popView">
        <div
          class="popItem"
          v-for="(item, index) in tabArr"
          :key="index"
          @click="popItem(index)"
        >
          <div class="flex1"></div>
          {{ item }}
          <div class="flex1"></div>
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script>
//导入组件
import Vue from "vue";
import echarts from "echarts";
import { Tab, Tabs, Popup, Swipe, SwipeItem } from "vant";

//注册组件
Vue.use(Tab).use(Tabs).use(Popup).use(Swipe).use(SwipeItem);
export default {
  name: "chart",
  data() {
    return {
      titleTxt: "业务管理系统",
      active: 0,
      activeOne1: 0,
      activeSix1: 0,
      
      chart0: null,
      chart1: null,
      chart2: null,
      choIndex: 0,
      showPop: false,
      tabArr: [
        "电力总览",
        "电力开发",
        "电力生产",
        "电力传输",
        "电力消费",
        "电力交易",
        "新能源发电",
        "电力经济",
      ],
      //显示哪些图表
      showOne: true,
      showTwo: true,
      showThree: true,
      showFour: true,
      showFive: true,
      showSix: true,
      showSeven: true,
      showEight: true,
      showNine: true,
      showTen: true,
      showOneTxt: "电力运行",
      showTwoTxt: "电力生产",
      showThreeTxt: "装机容量",
      showThreeTxt2: "",
      showFourTxt: "电力消费",
      showFourTxt2: "",
      showFiveTxt: "电力传输",
      showFiveTxt2: "",
      showSixTxt: "电力交易",
      showSixTxt2: "",
      showSixTxt2Click: true, //表示tab设置为禁用状态,禁用：true   启用:false
      showSevenTxt: "新能源发电",
      showEightTxt: "电力开发",
      showEightTxt2: "",
      showNineTxt: "指标监测",
      showTenTxt: "电力经济与发展",
    };
  },

  mounted() {
    if (this.active == 0) {
      this.showSixTxt2 = "平均交易价格";
      this.showSixTxt2Click = false;
      this.$nextTick(function () {
        this.mapEchart1(`main${this.active}${this.active}1`);
        this.barEchart(`main${this.active}${this.active}2`);
        this.pieEchart1(`main${this.active}${this.active}3`);
        this.pictorialBarEchart1(`main${this.active}${this.active}4`);
        this.barEchart2(`main${this.active}${this.active}5`);
        this.barAndLineEchart1(`main${this.active}${this.active}6`);
        this.barTwo1(`main${this.active}${this.active}7`);
        this.pieEchart2(`main${this.active}${this.active}8`);
        this.radarEchart1(`main${this.active}${this.active}9`);
        this.barEchart3(`main${this.active}${this.active}10`);
      });
    }
  },

  methods: {
    //点击菜单
    showMenu() {
      this.showPop = true;
    },

    //点击菜单项
    popItem(index) {
      this.showPop = false;
      this.active = index;
    },

    //改变主tab
    changeTab() {
      //每次点击切换时，将所有赋值的公共数据初始化
      //初始化--start
      this.showOne = true;
      this.showTwo = true;
      this.showThree = true;
      this.showFour = true;
      this.showFive = true;
      this.showSix = true;
      this.showSeven = true;
      this.showEight = true;
      this.showNine = true;
      this.showTen = true;
      this.showThreeTxt2 = "";
      this.showFourTxt2 = "";
      this.showFiveTxt2 = "";
      this.showSixTxt2 = "";
      this.showSixTxt2Click = true;
      this.showEightTxt2 = "";
      //初始化--end

      switch (this.active) {
        case 0:
          this.showOne = true;
          this.showTwo = true;
          this.showThree = true;
          this.showFour = true;
          this.showFive = true;
          this.showSix = true;
          this.showSeven = true;
          this.showEight = true;
          this.showNine = true;
          this.showTen = true;
          this.showOneTxt = "电力运行";
          this.showTwoTxt = "电力生产";
          this.showThreeTxt = "装机容量";
          this.showFourTxt = "电力消费";
          this.showFiveTxt = "电力传输";
          this.showSixTxt = "电力交易";
          this.showSixTxt2 = "平均交易价格";
          this.showSixTxt2Click = false;
          this.showSevenTxt = "新能源发电";
          this.showEightTxt = "电力开发";
          this.showNineTxt = "指标监测";
          this.showTenTxt = "电力经济与发展";

          this.$nextTick(function () {
            this.mapEchart1(`main${this.active}${this.active}1`);
            this.barEchart(`main${this.active}${this.active}2`);
            this.pieEchart1(`main${this.active}${this.active}3`);
            this.pictorialBarEchart1(`main${this.active}${this.active}4`);
            this.barEchart2(`main${this.active}${this.active}5`);
            this.barAndLineEchart1(`main${this.active}${this.active}6`);
            this.barTwo1(`main${this.active}${this.active}7`);
            this.pieEchart2(`main${this.active}${this.active}8`);
            this.radarEchart1(`main${this.active}${this.active}9`);
            this.barEchart3(`main${this.active}${this.active}10`);
          });

          break;
        case 1:
          this.showOneTxt = "各盟市装机容量及电厂建设";
          this.showTwoTxt = "项目数量";
          this.showThreeTxt = "项目容量";
          this.showFourTxt = "在建项目投资完成额";
          this.showFive = false;
          this.showSix = false;
          this.showSeven = false;
          this.showEight = false;
          this.showNine = false;
          this.showTen = false;

          this.$nextTick(function () {
            this.mapEchart1(`main${this.active}${this.active}1`);
            this.twoBarEchart1(`main${this.active}${this.active}2`);
            this.pieEchart1(`main${this.active}${this.active}3`);
            this.twoBarEchart2(`main${this.active}${this.active}4`);
          });
          break;
        case 2:
          this.showOneTxt = "各盟市电厂发电量及装机容量";
          this.showTwoTxt = "各发电类型电量";
          this.showThreeTxt = "火电装机量";
          this.showThreeTxt2 = "火电发电量";
          this.showFourTxt = "在建项目投资完成额";
          this.showFiveTxt = "各年度装机容量";
          this.showFiveTxt2 = "各年度发电量";
          this.showSixTxt = "发电装机及数量";
          this.showSeven = false;
          this.showEight = false;
          this.showNine = false;
          this.showTen = false;
          this.$nextTick(function () {
            this.mapEchart1(`main${this.active}${this.active}1`);
            this.pieEchart1(`main${this.active}${this.active}2`);
            this.threeBarEchart1(`main${this.active}${this.active}3`);
            this.threeBarEchart2(`main${this.active}${this.active}4`);
            this.threeBarEchart3(`main${this.active}${this.active}5`);
            this.threeBarEchart4(`main${this.active}${this.active}6`);
          });
          break;
        case 3:
          this.showOneTxt = "输电网运行监测";
          this.showTwoTxt = "电网建设规模";
          this.showThreeTxt = "发用电及统调负荷";
          this.showFourTxt = "年度运行指标";
          this.showFiveTxt = "外送电量计划完成率";
          this.showSixTxt = "外送电量";
          this.showSixTxt2 = "每月同比";
          this.showSixTxt2Click = false;
          this.showSeven = false;
          this.showEight = false;
          this.showNine = false;
          this.showTen = false;
          this.$nextTick(function () {
            this.mapEchart1(`main${this.active}${this.active}1`);
            this.fourBarEchart1(`main${this.active}${this.active}2`);
            this.fourBarAndLineEchart1(`main${this.active}${this.active}3`);
            this.fourBarEchart2(`main${this.active}${this.active}4`);
            this.fourBarEchart3(`main${this.active}${this.active}5`);
            this.fourBarEchart4(`main${this.active}${this.active}6`);
          });
          break;
        case 4:
          this.showOneTxt = "各蒙市万元GDP电耗指数";
          this.showTwoTxt = "各产业电力消费量";
          this.showThreeTxt = "终端电力消费年度变化趋势";
          this.showFourTxt = "万元GDP电耗指数";
          this.showFiveTxt = "各产业万元GDP电耗指数";
          this.showSixTxt = "高耗能行业电耗情况   ";
          this.showSeven = false;
          this.showEight = false;
          this.showNine = false;
          this.showTen = false;
          this.$nextTick(function () {
            this.mapEchart1(`main${this.active}${this.active}1`);
            this.fivepictorialBarEchart1(`main${this.active}${this.active}2`);
            this.flveBarAndLineEchart1(`main${this.active}${this.active}3`);
            this.flveLineEchart1(`main${this.active}${this.active}4`);
            this.fiveMoreBarEchart1(`main${this.active}${this.active}5`);
            this.fiveMoreLineEchart1(`main${this.active}${this.active}6`);
          });
          break;
        case 5:
          this.showOneTxt = "市场让利金额";
          this.showTwoTxt = "交易电量与成交价";
          this.showThreeTxt = "市场主体数量";
          this.showFourTxt = "月度获利资金流向分析";
          this.showFourTxt2 = "获利汇总";
          this.showFive = false;
          this.showSix = false;
          this.showSeven = false;
          this.showEight = false;
          this.showNine = false;
          this.showTen = false;
          this.$nextTick(function () {
            this.mapEchart1(`main${this.active}${this.active}1`);
            this.sixBarAndLineEchart1(`main${this.active}${this.active}2`);
            this.sixPieEchart1(`main${this.active}${this.active}3`);
            this.sixBarTwo1(`main${this.active}${this.active}4`);
          });
          break;
        case 6:
          this.showOneTxt = "资源分布";
          this.showTwoTxt = "装机容量";
          this.showThreeTxt = "风电发电量与弃风率";
          this.showThreeTxt2 = "光伏发电量与弃光率";
          this.showFourTxt = "新能源发电量";
          this.showFourTxt2 = "新能源发电占比";
          this.showFiveTxt = "光伏扶贫发电量分析";
          this.showSix = false;
          this.showSeven = false;
          this.showEight = false;
          this.showNine = false;
          this.showTen = false;
          this.$nextTick(function () {
            this.mapEchart1(`main${this.active}${this.active}1`);
            this.sevenBarEchart1(`main${this.active}${this.active}2`);
            this.sevenExtra1(`extraEchart1${this.active}${this.active}2`);
            this.sevenBarAndLineEchart1(`main${this.active}${this.active}3`);
            this.sevenPieEchart2(`main${this.active}${this.active}4`);
          });
          break;
        case 7:
          this.showOneTxt = "电力效率与环境治理";
          this.showTwoTxt = "发用电量及新能源占比各省对标";
          this.showThreeTxt = "电力经济与发展";
          this.showFourTxt = "电力行业与经济发展";
          this.showFiveTxt = "新能源发电";
          this.showSixTxt = "电力消费";
          this.showSevenTxt = "电力外送";
          this.showEightTxt = "电力市场";
          this.showEightTxt2 = "市场主体获利占比";
          this.showNineTxt = "电力科技";
          this.showTen = false;
          this.$nextTick(function () {
            this.eightRadarEchart1(`main${this.active}${this.active}1`);
            this.eightRadarEchart1(`main${this.active}${this.active}2`);
            this.eightLineEchart1(`main${this.active}${this.active}3`);
            this.eightBarAndLineEchart1(`main${this.active}${this.active}4`);
            this.eightLineEchart1(`main${this.active}${this.active}5`);
            this.eightBarAndLineEchart2(`main${this.active}${this.active}6`);
            this.eightPieEchart1(`main${this.active}${this.active}7`);
            this.eightBarTwo1(`main${this.active}${this.active}8`);
            this.eightRadarEchart3(`main${this.active}${this.active}9`);
          });
          break;
        default:
          this.barEchart(`main${this.active}${this.active}1`);
          break;
      }
    },

    //第六图的tab
    changeTabSix1() {
      if (this.activeSix1 == 0) {
        if (this.active == 0) {
          //第一页第六图tab1
          this.$nextTick(function () {
            this.barAndLineEchart1(`main${this.active}${this.active}6`);
          });
        } else if (this.active == 3) {
          //第四页第六图tab1
          this.$nextTick(function () {
            this.fourBarEchart4(`main${this.active}${this.active}6`);
          });
        } else {
        }
      } else {
        if (this.active == 0) {
          //第一页第六图tab2
          this.$nextTick(function () {
            this.barAndLineEchart1(`main${this.active}${this.active}62`);
          });
        } else if (this.active == 3) {
          //第四页第六图tab2
          this.$nextTick(function () {
            this.fourBarEchart4(`main${this.active}${this.active}62`);
          });
        } else {
        }
      }
    },

    // 加载json数据
    require(src) {
      return new Promise((resolve, reject) => {
        const request = new XMLHttpRequest();
        request.open("get", src, true);

        request.send(null);
        request.onload = function () {
          resolve(JSON.parse(request.responseText));
        };
      });
    },
    // 生成省级地图
    async createProvinceMap({ id, name, level, viewId }) {
      this.initMap(viewId);
      // 获取省地图
      const { list, mapName } = await this.getMap("province", id, viewId);
      // 配置
      echarts.init(document.getElementById(viewId)).setOption({
        tooltip: {
          trigger: "item",
          formatter: "{b}",
        },
        color: ["#5D7092", "#95D8F8", "#357FFF", "#362D6D"],
        legend: {
          data: [
            "0-100亿千瓦时",
            "100-200亿千瓦时",
            "200-300亿千瓦时",
            "300-400亿千瓦时",
          ],
          right: "5%",
          // orient: "vertical",
          width: "60%",
          itemWidth: 12,
          textStyle: {
            color: "#999",
          },
        },
        title: {
          text: name,
          left: "center",
          padding: 20,
        },
        series: [
          this.getMapSeriesConfig({
            map: mapName,
            data: list,
            zoom: 1,
          }),
        ],
      });
    },
    // 根据level获取地图
    async getMap(level, id, viewId) {
      let map = await require(`../assets/images/150000_full.json`);
      const mapName = id ? `province-150000` : level;
      const list = [];

      for (let i of map.features) {
        const name = i.properties.name;
        const id = i.properties.adcode;
        const level = i.properties.level;
        list.push({ id, name, level });
      }
      // 注册地图
      echarts.registerMap(mapName, map);
      return { mapName, list };
    },
    // 获取 base config
    getMapSeriesConfig(options = {}) {
      // 地图默认配置项
      const config = {
        areaColor: "#EFF7FF",
        borderColor: "#96C2F1",
      };
      return Object.assign(
        {
          type: "map",
          roam: true,
          zoom: 6,
          scaleLimit: {
            min: 1,
            max: 20,
          },
          label: {
            show: true,
          },
          itemStyle: {
            areaColor: config.areaColor,
            borderType: "dotted",
            borderColor: config.borderColor,
          },
        },
        options
      );
    },

    // 初始化
    initMap(viewId) {
      echarts.init(document.getElementById(viewId)).clear();
      echarts.init(document.getElementById(viewId)).off("click");
      echarts.init(document.getElementById(viewId)).resize();
    },

    //地区分布图
    async mapEchart1(id) {
      // 生成内蒙古地图
      this.createProvinceMap({
        id: "150000",
        name: "",
        level: "province",
        viewId: id,
      });
    },
    //饼图
    pieEchart1(id) {
      echarts.init(document.getElementById(id)).setOption({
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        color: [
          "#FFE264",
          "#0081FE",
          "#7598B2",
          "#00DBAB",
          "#372D6C",
          "#79DAF9",
        ],
        series: [
          {
            name: "类型",
            type: "pie",
            radius: ["35%", "60%"],
            center: ["50%", "50%"],
            label: {
              color: "#999999",
            },
            data: [
              { value: 45, name: "风电" },
              { value: 10, name: "光电" },
              { value: 15, name: "水电" },
              { value: 10, name: "火电" },
              { value: 10, name: "核电" },
              { value: 10, name: "其他" },
            ],
          },
        ],
      });
    },

    //柱状图
    barEchart(id) {
      echarts.init(document.getElementById(id)).setOption({
        title: {},
        tooltip: {
          trigger: "axis", //坐标轴触发
          axisPointer: {
            type: "shadow", //阴影指示器
          },
        },
        legend: {
          data: [],
          textStyle: {
            color: "#999",
          },
        },
        grid: {
          left: "3%", //左边距
          right: "5%",
          bottom: "3%",
          top: "10%",
          containLabel: true, //刻度标签,这常用于『防止标签溢出』的场景，标签溢出指的是，标签长度动态变化时，可能会溢出容器或者覆盖其他组件。
        },
        xAxis: {
          axisTick: {
            show: false, //刻度尺
          },
          axisLine: {
            show: false, //坐标轴线
          },
          splitLine: {
            show: false, //分隔线。默认数值轴显示，类目轴不显示。
          },
          axisLabel: {
            textStyle: {
              color: "#999999", //坐标轴字体颜色
            },
          },

          type: "value", //数值轴
          boundaryGap: [0, 0.01], //坐标轴两边留白策略
        },
        yAxis: {
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              // 使用深浅的间隔色color: ['#F5F5F5','#F0F0F0']
              color: "#F5F5F5",
            },
          },
          axisLabel: {
            textStyle: {
              color: "#999999", //坐标轴字体颜色
            },
          },
          // boundaryGap: true,//坐标轴两边留白策略
          boundaryGap: [0, 0.01], //坐标轴两边留白策略
          type: "category", //类目轴
          data: ["其他", "水电", "光电", "风电", "火电"],
        },
        series: [
          {
            type: "bar", //柱状图
            itemStyle: {
              barBorderRadius: [5, 5, 5, 5], //圆角
              normal: {
                barBorderRadius: [5, 5, 5, 5],
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0,
                    color: "#357FFF", //0%处的颜色
                  },
                  {
                    offset: 1,
                    color: "#66B6FF", //100%处的颜色
                  },
                ]), //柱状颜色渐变
              },
            },
            data: [1400, 2400, 800, 500, 1400],
            barWidth: 10, //柱状条宽度的百分比
            barGap: "10%", //同一系列的柱间距离，默认为类目间距的20%，可设固定值
          },
        ],
      });
    },

    //柱状图2
    barEchart2(id) {
      echarts.init(document.getElementById(id)).setOption({
        title: {},
        tooltip: {
          trigger: "axis", //坐标轴触发
          axisPointer: {
            type: "shadow", //阴影指示器
          },
        },
        legend: {
          data: [],
          textStyle: {
            color: "#999",
          },
        },
        grid: {
          left: "3%", //左边距
          right: "10%",
          bottom: "3%",
          top: "10%",
          containLabel: true, //刻度标签,这常用于『防止标签溢出』的场景，标签溢出指的是，标签长度动态变化时，可能会溢出容器或者覆盖其他组件。
        },
        xAxis: {
          axisTick: {
            show: false, //刻度尺
          },
          axisLine: {
            show: false, //坐标轴线
          },
          splitLine: {
            show: false, //分隔线。默认数值轴显示，类目轴不显示。
          },
          axisLabel: {
            textStyle: {
              color: "#999999", //坐标轴字体颜色
            },
          },

          type: "value", //数值轴
          boundaryGap: [0, 0.01], //坐标轴两边留白策略
        },
        yAxis: {
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              // 使用深浅的间隔色color: ['#F5F5F5','#F0F0F0']
              color: "#F5F5F5",
            },
          },
          axisLabel: {
            textStyle: {
              color: "#999999", //坐标轴字体颜色
            },
          },
          // boundaryGap: true,//坐标轴两边留白策略
          boundaryGap: [0, 0.01], //坐标轴两边留白策略
          type: "category", //类目轴
          data: ["东北", "华北", "华东", "宁夏", "陕西", "蒙古"],
        },
        series: [
          {
            type: "bar", //柱状图
            itemStyle: {
              barBorderRadius: [5, 5, 5, 5], //圆角
              normal: {
                barBorderRadius: [5, 5, 5, 5],
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0,
                    color: "#357FFF", //0%处的颜色
                  },
                  {
                    offset: 1,
                    color: "#66B6FF", //100%处的颜色
                  },
                ]), //柱状颜色渐变
              },
            },
            label: {
              show: true,
              position: "right",
              formatter: function (param) {
                if (param.data == 50) {
                  return "{a|14.78% ↑}";
                } else if (param.data == 92) {
                  return "{b|3.77% ↓}";
                } else if (param.data == 27) {
                  return "{a|8.43% ↑}";
                } else if (param.data == 18) {
                  return "{a|8.43% ↑}";
                } else if (param.data == 54) {
                  return "{b|3.77% ↓}";
                } else if (param.data == 93) {
                  return "{a|8.43% ↑}";
                } else {
                  return "--";
                }
              },
              rich: {
                a: {
                  color: "#FF6A6A",
                  lineHeight: 10,
                },
                b: {
                  color: "#59C143",
                },
              },
              color: "#FF6A6A",
            },
            data: [50, 92, 27, 18, 54, 93],
            barWidth: 10, //柱状条宽度的百分比
            barGap: "10%", //同一系列的柱间距离，默认为类目间距的20%，可设固定值
          },
        ],
      });
    },

    //三角形柱状图
    pictorialBarEchart1(id) {
      echarts.init(document.getElementById(id)).setOption({
        grid: {
          left: "3%", //左边距
          right: "5%",
          bottom: "3%",
          top: "3%",
          containLabel: true, //刻度标签,这常用于『防止标签溢出』的场景，标签溢出指的是，标签长度动态变化时，可能会溢出容器或者覆盖其他组件。
        },
        xAxis: {
          data: ["第一产业", "第二产业", "第三产业", "城乡居民"],

          axisTick: {
            show: false,
          },
          axisLine: {
            show: false, //坐标轴线
          },
          splitLine: {
            show: false, //分隔线。默认数值轴显示，类目轴不显示。
          },
          axisLabel: {
            textStyle: {
              color: "#999999", //坐标轴字体颜色
            },
          },
          axisLabel: {
            interval: 0,
          },
        },
        yAxis: {
          splitLine: { show: false },
          axisLabel: {
            textStyle: {
              color: "#999999", //坐标轴字体颜色
            },
          },
          axisTick: {
            show: false, //刻度尺
          },
          axisLine: {
            show: false, //坐标轴线
          },
          splitLine: {
            show: true,
            lineStyle: {
              // 使用深浅的间隔色color: ['#F5F5F5','#F0F0F0']
              color: "#F5F5F5",
            },
          },
          type: "value", //数值轴
        },
        series: [
          {
            type: "pictorialBar",
            symbolSize: ["130%", "100%"],
            symbolPosition: "center",
            z: 10,

            data: [
              {
                value: 2400,
                // Built-in type, can be 'circle', 'rect', 'roundRect', 'square', 'diamond', 'triangle', 'pin', 'arrow'.
                symbol: "triangle",
                itemStyle: {
                  color: "#357FFF",
                },
              },
              {
                value: 8800,
                // Built-in type, can be 'circle', 'rect', 'roundRect', 'square', 'diamond', 'triangle', 'pin', 'arrow'.
                symbol: "triangle",
                itemStyle: {
                  color: "#5AD8A6",
                },
              },
              {
                value: 6000,
                // Built-in type, can be 'circle', 'rect', 'roundRect', 'square', 'diamond', 'triangle', 'pin', 'arrow'.
                symbol: "triangle",
                itemStyle: {
                  color: "#5D7092",
                },
              },
              {
                value: 2000,
                // Built-in type, can be 'circle', 'rect', 'roundRect', 'square', 'diamond', 'triangle', 'pin', 'arrow'.
                symbol: "triangle",
                itemStyle: {
                  color: "#FFE364 ",
                },
              },
            ],
          },
        ],
      });
    },

    //柱状折线图1
    barAndLineEchart1(id) {
      echarts.init(document.getElementById(id)).setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        grid: {
          left: "13%", //左边距
        },
        toolbox: {
          //下载、切换等功能
          // feature: {
          //   dataView: { show: true, readOnly: false },
          //   magicType: { show: true, type: ["line", "bar"] },
          //   restore: { show: true },
          //   saveAsImage: { show: true },
          // },
        },
        color: ["#FA8E01", "#357FFF", "#5AD8A6"],
        legend: {
          data: ["平均交易电量(厘/kWh)", "交易电量(蒙西)", "交易电量(蒙东)"],
          textStyle: {
            color: "#999",
          },
        },
        xAxis: [
          {
            type: "category",
            data: ["2015", "2016", "2017", "2018", "2019"],
            axisPointer: {
              type: "shadow",
            },
            axisTick: {
              show: false, //刻度尺
            },
            axisLine: {
              show: true, //坐标轴线
            },
            splitLine: {
              show: false, //分隔线。默认数值轴显示，类目轴不显示。
            },
            axisLabel: {
              textStyle: {
                color: "#999999", //坐标轴字体颜色
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "亿千瓦时",
            nameTextStyle: {
              color: "#999",
            },
            min: 0,
            max: 8000,
            interval: 2000,
            axisLabel: {
              formatter: "{value} ml",
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                // 使用深浅的间隔色color: ['#F5F5F5','#F0F0F0']
                color: "#F5F5F5",
              },
            },
            axisLabel: {
              textStyle: {
                color: "#999999", //坐标轴字体颜色
              },
            },
          },
        ],
        series: [
          {
            name: "交易电量(蒙西)",
            nameTextStyle: {
              color: "#999",
            },
            type: "bar",
            data: [2800, 3100, 5000, 5200, 6100],
            itemStyle: {
              color: "#357FFF",
            },
            barWidth: 10, //柱状条宽度的百分比
          },
          {
            name: "交易电量(蒙东)",
            nameTextStyle: {
              color: "#999",
            },
            type: "bar",
            data: [400, 1600, 1600, 3800, 4400],
            itemStyle: {
              color: "#5AD8A6",
            },
            barWidth: 10, //柱状条宽度的百分比
          },
          {
            name: "平均交易电量(厘/kWh)",
            type: "line",
            data: [2200, 4400, 6800, 6900, 6900],
            itemStyle: {
              color: "#FFAB3E",
            },
            showSymbol: false,
          },
        ],
      });
    },

    //双重柱状图1
    barTwo1(id) {
      echarts.init(document.getElementById(id)).setOption({
        color: ["#357FFF", "#5AD8A6"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        legend: {
          right: "5%",
          orient: "horizontal",
          data: ["光伏发电量", "风电发电量"],
          textStyle: {
            color: "#999",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: ["2015", "2017", "2017", "2018", "2019"],
          axisTick: {
            show: false, //刻度尺
          },
          axisLine: {
            show: false, //坐标轴线
          },
          splitLine: {
            show: false, //分隔线。默认数值轴显示，类目轴不显示。
          },
          axisLabel: {
            textStyle: {
              color: "#999999", //坐标轴字体颜色
            },
          },
        },
        yAxis: {
          type: "value",
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              // 使用深浅的间隔色color: ['#F5F5F5','#F0F0F0']
              color: "#F5F5F5",
            },
          },
          axisLabel: {
            textStyle: {
              color: "#999999", //坐标轴字体颜色
            },
          },
        },
        series: [
          {
            name: "光伏发电量",
            type: "bar",
            stack: "总量",
            data: [1600, 3600, 5100, 6200, 7800],
            itemStyle: {
              color: "#357FFF",
            },
            barWidth: 20,
          },
          {
            name: "风电发电量",
            type: "bar",
            stack: "总量",
            data: [400, 900, 1100, 1300, 1400],
            itemStyle: {
              color: "#5AD8A6",
            },
            barWidth: 20,
          },
        ],
      });
    },

    //饼图2
    pieEchart2(id) {
      echarts.init(document.getElementById(id)).setOption({
        color: ["#357FFF", "#FFE364"],
        legend: {
          orient: "horizontal",
          right: 10,
          data: ["在建", "拟建"],
          textStyle: {
            color: "#999",
          },
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "30",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 75, name: "在建" },
              { value: 25, name: "拟建" },
            ],
            startAngle: 180, //起点位置
          },
        ],
      });
    },

    //雷达图2
    radarEchart1(id) {
      echarts.init(document.getElementById(id)).setOption({
        color: ["#357FFF", "#5AD8A6", "#5D7092", "#FFE364"],
        tooltip: {},
        legend: {
          data: ["2015", "2016", "2017", "2018"],
          right: "5%",
          orient: "horizontal",
          textStyle: {
            color: "#999",
          },
          itemWidth: 16,
        },
        grid: {
          top: "11%",
        },
        radar: {
          // shape: 'circle',
          name: {},
          indicator: [
            { name: "电力总装机", max: 100 },
            { name: "年发电量", max: 100 },
            { name: "年外送量", max: 100 },
            { name: "最高用电负荷", max: 100 },
            { name: "最高用电负荷", max: 100 },
            { name: "全社会用电量", max: 100 },
            { name: "居民人均生活用电量", max: 100 },
            { name: "火电平均供电煤耗", max: 100 },
            { name: "用小时数", max: 100 },
            { name: "火电设备年平均利", max: 100 },
            { name: "电网综合线损率", max: 100 },
          ],
          nameTextStyle: {
            color: "#999",
          },
          radius: ["0%", "60%"],
          splitArea: {
            show: false,
          },
        },
        series: [
          {
            type: "radar",
            // areaStyle: {normal: {}},
            data: [
              {
                value: [80, 20, 90, 70, 20, 80, 20, 90, 70, 20, 10],
                name: "2015",
                areaStyle: {
                  color: "rgba(71, 143, 248, 0.3)",
                },
                lineStyle: {
                  color: "#357FFF",
                },
                itemStyle: {
                  borderColor: "#357FFF",
                },
              },
              {
                value: [30, 10, 60, 15, 70, 80, 20, 90, 70, 20, 80],
                name: "2016",
                areaStyle: {
                  color: "rgba(117, 220, 165, 0.6)",
                },
                lineStyle: {
                  color: "#5AD8A6",
                },
                itemStyle: {
                  borderColor: "#5AD8A6",
                },
              },
              {
                value: [10, 10, 40, 75, 20, 80, 20, 90, 70, 20, 40],
                name: "2017",
                areaStyle: {
                  color: "rgba(91, 112, 146, 0.6)",
                },
                lineStyle: {
                  color: "#5AD8A6",
                },
                itemStyle: {
                  borderColor: "#5AD8A6",
                },
              },
              {
                value: [50, 20, 50, 15, 10, 80, 20, 90, 70, 20, 10],
                name: "2018",
                areaStyle: {
                  color: "rgba(255, 227, 102, 0.6)",
                },
                lineStyle: {
                  color: "#5AD8A6",
                },
                itemStyle: {
                  borderColor: "#5AD8A6",
                },
              },
            ],
            symbolSize: 0,
          },
        ],
      });
    },

    //柱状图3
    barEchart3(id) {
      echarts.init(document.getElementById(id)).setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },

        grid: {
          left: "14%",
        },
        color: ["#FA8E01", "#357FFF"],
        legend: {
          right: 10,
          data: ["国内生产总值", "电力行业GDP贡献量"],
          textStyle: {
            color: "#999",
          },
        },
        xAxis: [
          {
            type: "category",
            data: ["2015", "2016", "2017", "2018", "2019"],
            axisPointer: {
              type: "shadow",
            },
            axisTick: {
              show: false, //刻度尺
            },
            axisLine: {
              show: false, //坐标轴线
            },
            splitLine: {
              show: false, //分隔线。默认数值轴显示，类目轴不显示。
            },
            axisLabel: {
              textStyle: {
                color: "#999999", //坐标轴字体颜色
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "万元",
            nameTextStyle: {
              color: "#999999",
            },
            min: 0,
            max: 8000,
            interval: 2000,
            axisLabel: {
              formatter: "{value} ml",
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                // 使用深浅的间隔色color: ['#F5F5F5','#F0F0F0']
                color: "#F5F5F5",
              },
            },
            axisLabel: {
              textStyle: {
                color: "#999999", //坐标轴字体颜色
              },
            },
          },
        ],
        series: [
          {
            name: "国内生产总值",
            type: "bar",
            data: [2800, 3100, 5000, 5200, 6100],
            itemStyle: {
              color: "#357FFF",
            },
            barWidth: 10, //柱状条宽度的百分比
          },
          {
            name: "电力行业GDP贡献量",
            type: "bar",
            data: [400, 1600, 1600, 3800, 4400],
            itemStyle: {
              color: "#5AD8A6",
            },
            barWidth: 10, //柱状条宽度的百分比
          },
        ],
      });
    },

    //第二页柱状图1
    twoBarEchart1(id) {
      echarts.init(document.getElementById(id)).setOption({
        color: ["#357FFF"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: ["火电", "水电", "风电", "光电", "其他"],
          axisTick: {
            show: false, //刻度尺
          },
          axisLine: {
            show: false, //坐标轴线
          },
          splitLine: {
            show: false, //分隔线。默认数值轴显示，类目轴不显示。
          },
          axisLabel: {
            textStyle: {
              color: "#999999", //坐标轴字体颜色
            },
          },
        },
        yAxis: {
          name: "↑",
          nameTextStyle: {
            color: "#999",
          },
          type: "value",
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              // 使用深浅的间隔色color: ['#F5F5F5','#F0F0F0']
              color: "#F5F5F5",
            },
          },
          axisLabel: {
            textStyle: {
              color: "#999999", //坐标轴字体颜色
            },
          },
        },
        series: [
          {
            name: "光伏发电量",
            type: "bar",
            stack: "总量",
            data: [8, 16, 27, 32, 38],
            itemStyle: {
              color: "#357FFF",
            },
            barWidth: 35,
          },
        ],
      });
    },

    //第二页柱状图2
    twoBarEchart2(id) {
      echarts.init(document.getElementById(id)).setOption({
        color: ["#357FFF", "#95D8F8"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        legend: {
          right: "5%",
          orient: "horizontal",
          data: ["已投资", "未投资"],
          textStyle: {
            color: "#999",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              // 使用深浅的间隔色color: ['#F5F5F5','#F0F0F0']
              color: "#F5F5F5",
            },
          },
          axisLabel: {
            textStyle: {
              color: "#999999", //坐标轴字体颜色
            },
          },
        },
        yAxis: {
          type: "category",
          data: ["变电站", "线路", "光伏", "风电", "火电"],
          axisTick: {
            show: false, //刻度尺
          },
          axisLine: {
            show: false, //坐标轴线
          },
          splitLine: {
            show: false, //分隔线。默认数值轴显示，类目轴不显示。
          },
          axisLabel: {
            textStyle: {
              color: "#999999", //坐标轴字体颜色
            },
          },
        },
        series: [
          {
            name: "已投资",
            type: "bar",
            stack: "总量",
            data: [47, 18, 45, 30, 80],
            itemStyle: {
              color: "#357FFF",
            },
            barWidth: 10,
          },
          {
            name: "未投资",
            type: "bar",
            stack: "总量",
            data: [40, 10, 40, 40, 40],
            itemStyle: {
              color: "#95D8F8",
            },
            barWidth: 10,
          },
        ],
      });
    },

    //第三页柱状图1
    threeBarEchart1(id) {
      echarts.init(document.getElementById(id)).setOption({
        color: ["#357FFF", "#5AD8A6"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        legend: {
          right: "5%",
          orient: "horizontal",
          data: ["公用植物装机", "自备工厂装机"],
          textStyle: {
            color: "#999",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: ["2015", "2017", "2017", "2018", "2019", "2020"],
          axisTick: {
            show: false, //刻度尺
          },
          axisLine: {
            show: false, //坐标轴线
          },
          splitLine: {
            show: false, //分隔线。默认数值轴显示，类目轴不显示。
          },
          axisLabel: {
            textStyle: {
              color: "#999999", //坐标轴字体颜色
            },
          },
        },
        yAxis: {
          type: "value",
          name: "万千万",
          nameTextStyle: {
            color: "#999",
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              // 使用深浅的间隔色color: ['#F5F5F5','#F0F0F0']
              color: "#F5F5F5",
            },
          },
          axisLabel: {
            textStyle: {
              color: "#999999", //坐标轴字体颜色
            },
          },
        },
        series: [
          {
            name: "公用植物装机",
            type: "bar",
            stack: "总量",
            data: [1600, 3600, 5100, 6200, 7800, 7900],
            itemStyle: {
              color: "#357FFF",
            },
            barWidth: 30,
          },
          {
            name: "自备工厂装机",
            type: "bar",
            stack: "总量",
            data: [400, 900, 1100, 1300, 1400, 1600],
            itemStyle: {
              color: "#5AD8A6",
            },
            barWidth: 30,
          },
        ],
      });
    },

    //第三页柱状图2
    threeBarEchart2(id) {
      echarts.init(document.getElementById(id)).setOption({
        color: ["#357FFF", "#5AD8A6", "#5D7092", "#FFE364", "#95D8F8"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        legend: {
          right: "5%",
          orient: "horizontal",
          data: ["火电", "水电", "光伏", "风电", "其他"],
          textStyle: {
            color: "#999",
          },
          height: "10%",
          width: "80%",
          itemWidth: 16.5,
          itemHeight: 11.5,
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          top: "7%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              // 使用深浅的间隔色color: ['#F5F5F5','#F0F0F0']
              color: "#F5F5F5",
            },
          },
          axisLabel: {
            textStyle: {
              color: "#999999", //坐标轴字体颜色
            },
          },
        },
        yAxis: {
          type: "category",
          data: [
            "巴彦卓尔",
            "鄂尔多斯",
            "赤峰",
            "锡林郭勒",
            "兴安",
            "乌兰察布",
            "呼伦贝尔",
            "通辽",
            "乌海",
            "呼和浩特",
            "包头",
            "阿拉善",
          ],

          axisLabel: {
            inside: true,
            textStyle: {
              color: "#fff",
            },
          },
          z: 10,
          axisTick: {
            show: false, //刻度尺
          },
          axisLine: {
            show: false, //坐标轴线
          },
          splitLine: {
            show: false, //分隔线。默认数值轴显示，类目轴不显示。
          },
        },
        series: [
          {
            name: "火电",
            type: "bar",
            stack: "总量",
            data: [300, 300, 350, 350, 400, 400, 450, 500, 550, 750, 800, 600],
            itemStyle: {
              color: "#357FFF",
            },
            barWidth: 15,
          },
          {
            name: "水电",
            type: "bar",
            stack: "总量",
            data: [20, 30, 40, 60, 80, 150, 100, 100, 100, 280, 300, 200],
            itemStyle: {
              color: "#5AD8A6",
            },
            barWidth: 15,
          },
          {
            name: "光伏",
            type: "bar",
            stack: "总量",
            data: [10, 30, 40, 60, 80, 80, 100, 110, 120, 100, 100, 400],
            itemStyle: {
              color: "#5D7092",
            },
            barWidth: 15,
          },
          {
            name: "风电",
            type: "bar",
            stack: "总量",
            data: [80, 80, 80, 150, 180, 300, 200, 200, 200, 150, 15, 500],
            itemStyle: {
              color: "#FFE364",
            },
            barWidth: 15,
          },
          {
            name: "其他",
            type: "bar",
            stack: "总量",
            data: [30, 30, 40, 50, 80, 80, 80, 40, 40, 50, 50, 100],
            itemStyle: {
              color: "#95D8F8",
            },
            barWidth: 15,
          },
        ],
      });
    },

    //第三页柱状图3
    threeBarEchart3(id) {
      echarts.init(document.getElementById(id)).setOption({
        color: ["#357FFF", "#5AD8A6", "#5D7092", "#FFE364", "#95D8F8"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        legend: {
          right: "5%",
          orient: "horizontal",
          data: ["火电", "水电", "光伏", "风电", "其他"],
          textStyle: {
            color: "#999",
          },
          height: "10%",
          width: "80%",
          itemWidth: 16.5,
          itemHeight: 11.5,
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          top: "10%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: ["2015", "2016", "2017", "2018", "2019", "2020"],

          axisLabel: {
            textStyle: {
              color: "#999",
            },
          },
          axisTick: {
            show: false, //刻度尺
          },
          axisLine: {
            show: false, //坐标轴线
          },
          splitLine: {
            show: false, //分隔线。默认数值轴显示，类目轴不显示。
          },
        },
        yAxis: {
          type: "value",
          name: "万千瓦",
          nameTextStyle: {
            color: "#999",
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              // 使用深浅的间隔色color: ['#F5F5F5','#F0F0F0']
              color: "#F5F5F5",
            },
          },
          axisLabel: {
            textStyle: {
              color: "#999999", //坐标轴字体颜色
            },
          },
        },
        series: [
          {
            name: "火电",
            type: "bar",
            stack: "总量",
            data: [1800, 2200, 2600, 3200, 3200, 3800],
            itemStyle: {
              color: "#357FFF",
            },
            barWidth: 30,
          },
          {
            name: "水电",
            type: "bar",
            stack: "总量",
            data: [1100, 1300, 1600, 1800, 1800, 2200],
            itemStyle: {
              color: "#5AD8A6",
            },
            barWidth: 15,
          },
          {
            name: "光伏",
            type: "bar",
            stack: "总量",
            data: [200, 300, 500, 500, 500],
            itemStyle: {
              color: "#5D7092",
            },
            barWidth: 30,
          },
          {
            name: "风电",
            type: "bar",
            stack: "总量",
            data: [200, 300, 400, 500, 500, 700],
            itemStyle: {
              color: "#FFE364",
            },
            barWidth: 30,
          },
          {
            name: "其他",
            type: "bar",
            stack: "总量",
            data: [200, 300, 400, 500, 500, 700],
            itemStyle: {
              color: "#95D8F8",
            },
            barWidth: 30,
          },
        ],
      });
    },

    //第三页柱状图4
    threeBarEchart4(id) {
      echarts.init(document.getElementById(id)).setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },

        grid: {
          left: "14%",
        },
        color: ["#FA8E01", "#357FFF"],
        legend: {
          right: 10,
          data: ["装机容量", "数量"],
          textStyle: {
            color: "#999",
          },
        },
        xAxis: [
          {
            type: "category",
            data: ["火电", "水电", "风电", "光电", "其他"],
            axisPointer: {
              type: "shadow",
            },
            axisTick: {
              show: false, //刻度尺
            },
            axisLine: {
              show: false, //坐标轴线
            },
            splitLine: {
              show: false, //分隔线。默认数值轴显示，类目轴不显示。
            },
            axisLabel: {
              textStyle: {
                color: "#999999", //坐标轴字体颜色
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "万元",
            nameTextStyle: {
              color: "#999999",
              align: "right",
            },
            min: 0,
            max: 8000,
            interval: 2000,
            axisLabel: {
              formatter: "{value} ml",
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                // 使用深浅的间隔色color: ['#F5F5F5','#F0F0F0']
                color: "#F5F5F5",
              },
            },
            axisLabel: {
              textStyle: {
                color: "#999999", //坐标轴字体颜色
              },
            },
          },
          {
            type: "value",
            name: "       个",
            nameTextStyle: {
              color: "#999999",
            },
            min: 0,
            max: 40,
            interval: 10,
            axisLabel: {
              formatter: "{value} ml",
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                // 使用深浅的间隔色color: ['#F5F5F5','#F0F0F0']
                color: "#F5F5F5",
              },
            },
            axisLabel: {
              textStyle: {
                color: "#999999", //坐标轴字体颜色
              },
            },
          },
        ],
        series: [
          {
            name: "装机容量",
            type: "bar",
            data: [2800, 3100, 5000, 5200, 6100],
            itemStyle: {
              color: "#357FFF",
            },
            barWidth: 10, //柱状条宽度的百分比
          },
          {
            name: "数量",
            type: "bar",
            data: [400, 1600, 1600, 3800, 4400],
            itemStyle: {
              color: "#5AD8A6",
            },
            barWidth: 10, //柱状条宽度的百分比
          },
        ],
      });
    },

    //第四页柱状图1
    fourBarEchart1(id) {
      echarts.init(document.getElementById(id)).setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },

        grid: {
          left: "14%",
        },
        color: ["#FA8E01", "#357FFF"],
        legend: {
          right: 10,
          data: ["输配电线路", "变电站"],
          textStyle: {
            color: "#999",
          },
        },
        xAxis: [
          {
            type: "category",
            name: "千伏",
            nameTextStyle: {
              color: "#999",
              align: "right",
              verticalAlign: "top",
              lineHeight: 30,
            },
            data: ["20", "40", "60", "80", "100"],
            axisPointer: {
              type: "shadow",
            },
            axisTick: {
              show: false, //刻度尺
            },
            axisLine: {
              show: false, //坐标轴线
            },
            splitLine: {
              show: false, //分隔线。默认数值轴显示，类目轴不显示。
            },
            axisLabel: {
              textStyle: {
                color: "#999999", //坐标轴字体颜色
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "千米",
            nameTextStyle: {
              color: "#999999",
              align: "right",
            },
            min: 0,
            max: 8000,
            interval: 2000,
            axisLabel: {
              formatter: "{value} ml",
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                // 使用深浅的间隔色color: ['#F5F5F5','#F0F0F0']
                color: "#F5F5F5",
              },
            },
            axisLabel: {
              textStyle: {
                color: "#999999", //坐标轴字体颜色
              },
            },
          },
          {
            type: "value",
            name: "       个",
            nameTextStyle: {
              color: "#999999",
            },
            min: 0,
            max: 40,
            interval: 10,
            axisLabel: {
              formatter: "{value} ml",
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                // 使用深浅的间隔色color: ['#F5F5F5','#F0F0F0']
                color: "#F5F5F5",
              },
            },
            axisLabel: {
              textStyle: {
                color: "#999999", //坐标轴字体颜色
              },
            },
          },
        ],
        series: [
          {
            name: "输配电线路",
            type: "bar",
            data: [2800, 3100, 5000, 5200, 6100],
            itemStyle: {
              color: "#357FFF",
            },
            barWidth: 10, //柱状条宽度的百分比
          },
          {
            name: "变电站",
            type: "bar",
            data: [400, 1600, 1600, 3800, 4400],
            itemStyle: {
              color: "#5AD8A6",
            },
            barWidth: 10, //柱状条宽度的百分比
          },
        ],
      });
    },

    //第四页柱状折线图1
    fourBarAndLineEchart1(id) {
      echarts.init(document.getElementById(id)).setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        grid: {
          left: "14%",
        },
        color: ["#FA8E01", "#357FFF", "#5AD8A6"],
        legend: {
          data: ["统调最高负荷", "发电量", "供电量"],
          textStyle: {
            color: "#999",
          },
          right: "10%",
          itemWidth: 15,
        },
        xAxis: [
          {
            type: "category",
            data: ["2015", "2016", "2017", "2018", "2019"],
            axisPointer: {
              type: "shadow",
            },
            axisTick: {
              show: false, //刻度尺
            },
            axisLine: {
              show: true, //坐标轴线
            },
            splitLine: {
              show: false, //分隔线。默认数值轴显示，类目轴不显示。
            },
            axisLabel: {
              textStyle: {
                color: "#999999", //坐标轴字体颜色
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "亿千瓦时",
            min: 0,
            max: 8000,
            interval: 2000,
            axisLabel: {
              formatter: "{value} ml",
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                // 使用深浅的间隔色color: ['#F5F5F5','#F0F0F0']
                color: "#F5F5F5",
              },
            },
            axisLabel: {
              textStyle: {
                color: "#999999", //坐标轴字体颜色
              },
            },
          },
        ],
        series: [
          {
            name: "发电量",
            type: "bar",
            data: [2800, 3100, 5000, 5200, 6100],
            itemStyle: {
              color: "#357FFF",
            },
            barWidth: 10, //柱状条宽度的百分比
          },
          {
            name: "供电量",
            type: "bar",
            data: [400, 1600, 1600, 3800, 4400],
            itemStyle: {
              color: "#5AD8A6",
            },
            barWidth: 10, //柱状条宽度的百分比
          },
          {
            name: "统调最高负荷",
            type: "line",
            data: [2200, 4400, 6800, 6900, 6900],
            itemStyle: {
              color: "#FFAB3E",
            },
          },
        ],
      });
    },

    //第四页柱状图2
    fourBarEchart2(id) {
      echarts.init(document.getElementById(id)).setOption({
        color: ["#357FFF"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: ["累计发电量", "累计供电量", "累计外送电量", "累计购入电量"],
          axisTick: {
            show: false, //刻度尺
          },
          axisLine: {
            show: false, //坐标轴线
          },
          splitLine: {
            show: false, //分隔线。默认数值轴显示，类目轴不显示。
          },
          axisLabel: {
            textStyle: {
              color: "#999999", //坐标轴字体颜色
            },
          },
        },
        yAxis: {
          name: "亿千瓦时",
          nameTextStyle: {
            color: "#999",
          },
          type: "value",
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#F5F5F5",
            },
          },
          axisLabel: {
            textStyle: {
              color: "#999999", //坐标轴字体颜色
            },
          },
        },
        series: [
          {
            name: "test",
            type: "bar",
            data: [1800, 3700, 6800, 8600],
            label: {
              show: true,
              position: "top",
              formatter: function (param) {
                if (param.data == 1800) {
                  return "{a|3.14 ↑}";
                } else if (param.data == 3700) {
                  return "{a|3.14 ↑}";
                } else if (param.data == 6800) {
                  return "{a|3.14 ↑}";
                } else if (param.data == 8600) {
                  return "{b|3.14 ↓}";
                } else {
                  return "--";
                }
              },
              rich: {
                a: {
                  color: "#FF6A6A",
                  lineHeight: 10,
                },
                b: {
                  color: "#59C143",
                },
              },
            },
            itemStyle: {
              color: "#357FFF",
            },
            barWidth: 35,
          },
        ],
      });
    },

    //第四页柱状图3
    fourBarEchart3(id) {
      echarts.init(document.getElementById(id)).setOption({
        title: {},
        tooltip: {
          trigger: "axis", //坐标轴触发
          axisPointer: {
            type: "shadow", //阴影指示器
          },
        },
        legend: {
          data: [],
        },
        grid: {
          left: "3%", //左边距
          right: "10%",
          bottom: "3%",
          top: "5%",
          containLabel: true, //刻度标签,这常用于『防止标签溢出』的场景，标签溢出指的是，标签长度动态变化时，可能会溢出容器或者覆盖其他组件。
        },
        xAxis: {
          axisTick: {
            show: false, //刻度尺
          },
          axisLine: {
            show: false, //坐标轴线
          },
          splitLine: {
            show: false, //分隔线。默认数值轴显示，类目轴不显示。
          },
          axisLabel: {
            textStyle: {
              color: "#999999", //坐标轴字体颜色
            },
          },

          type: "value", //数值轴
          boundaryGap: [0, 0.01], //坐标轴两边留白策略
        },
        yAxis: {
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              // 使用深浅的间隔色color: ['#F5F5F5','#F0F0F0']
              color: "#F5F5F5",
            },
          },
          axisLabel: {
            textStyle: {
              color: "#999999", //坐标轴字体颜色
            },
          },
          // boundaryGap: true,//坐标轴两边留白策略
          boundaryGap: [0, 0.01], //坐标轴两边留白策略
          type: "category", //类目轴
          data: ["东北", "华北", "华东", "宁夏", "陕西", "蒙古"],
        },
        series: [
          {
            type: "bar", //柱状图
            itemStyle: {
              barBorderRadius: [5, 5, 5, 5], //圆角
              normal: {
                barBorderRadius: [5, 5, 5, 5],
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0,
                    color: "#357FFF", //0%处的颜色
                  },
                  {
                    offset: 1,
                    color: "#66B6FF", //100%处的颜色
                  },
                ]), //柱状颜色渐变
              },
            },
            label: {
              show: true,
              position: "right",
              formatter: function (param) {
                if (param.data == 50) {
                  return "{a|14.78% ↑}";
                } else if (param.data == 92) {
                  return "{b|3.77% ↓}";
                } else if (param.data == 27) {
                  return "{a|8.43% ↑}";
                } else if (param.data == 18) {
                  return "{a|8.43% ↑}";
                } else if (param.data == 54) {
                  return "{b|3.77% ↓}";
                } else if (param.data == 93) {
                  return "{a|8.43% ↑}";
                } else {
                  return "--";
                }
              },
              rich: {
                a: {
                  color: "#FF6A6A",
                  lineHeight: 10,
                },
                b: {
                  color: "#59C143",
                },
              },
              color: "#FF6A6A",
            },
            data: [50, 92, 27, 18, 54, 93],
            barWidth: 10, //柱状条宽度的百分比
            barGap: "10%", //同一系列的柱间距离，默认为类目间距的20%，可设固定值
          },
        ],
      });
    },

    //第四页柱状图4
    fourBarEchart4(id) {
      echarts.init(document.getElementById(id)).setOption({
        color: [
          "#357FFF",
          "#5AD8A6",
          "#5D7092",
          "#FFE364",
          "#95D8F8",
          "#362D6D",
        ],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        legend: {
          right: "3%",
          orient: "horizontal",
          data: ["东北", "华北", "华东", "宁夏", "陕西", "蒙古"],
          textStyle: {
            color: "#999",
          },
          height: "10%",
          width: "80%",
          itemWidth: 14,
          itemHeight: 11.5,
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          top: "10%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: ["2015", "2016", "2017", "2018", "2019", "2020"],

          axisLabel: {
            textStyle: {
              color: "#999",
            },
          },
          axisTick: {
            show: false, //刻度尺
          },
          axisLine: {
            show: false, //坐标轴线
          },
          splitLine: {
            show: false, //分隔线。默认数值轴显示，类目轴不显示。
          },
        },
        yAxis: {
          type: "value",
          name: "亿千瓦时",
          nameTextStyle: {
            color: "#999",
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              // 使用深浅的间隔色color: ['#F5F5F5','#F0F0F0']
              color: "#F5F5F5",
            },
          },
          axisLabel: {
            textStyle: {
              color: "#999999", //坐标轴字体颜色
            },
          },
        },
        series: [
          {
            name: "东北",
            type: "bar",
            stack: "总量",
            data: [1800, 2200, 2600, 3200, 3200, 3800],
            itemStyle: {
              color: "#357FFF",
            },
            barWidth: 30,
          },
          {
            name: "华北",
            type: "bar",
            stack: "总量",
            data: [1100, 1300, 1600, 1800, 1800, 2200],
            itemStyle: {
              color: "#5AD8A6",
            },
            barWidth: 15,
          },
          {
            name: "华东",
            type: "bar",
            stack: "总量",
            data: [200, 300, 500, 500, 500],
            itemStyle: {
              color: "#5D7092",
            },
            barWidth: 30,
          },
          {
            name: "宁夏",
            type: "bar",
            stack: "总量",
            data: [200, 300, 400, 500, 500, 700],
            itemStyle: {
              color: "#FFE364",
            },
            barWidth: 30,
          },
          {
            name: "陕西",
            type: "bar",
            stack: "总量",
            data: [200, 300, 400, 500, 500, 700],
            itemStyle: {
              color: "#95D8F8",
            },
            barWidth: 30,
          },
          {
            name: "蒙古",
            type: "bar",
            stack: "总量",
            data: [80, 120, 50, 100, 80, 80],
            itemStyle: {
              color: "#362D6D",
            },
            barWidth: 30,
          },
        ],
      });
    },

    //第五页三角形柱状图1
    fivepictorialBarEchart1(id) {
      echarts.init(document.getElementById(id)).setOption({
        grid: {
          left: "3%", //左边距
          right: "5%",
          bottom: "3%",
          top: "3%",
          containLabel: true, //刻度标签,这常用于『防止标签溢出』的场景，标签溢出指的是，标签长度动态变化时，可能会溢出容器或者覆盖其他组件。
        },
        xAxis: {
          data: ["第一产业", "第二产业", "第三产业", "城乡居民"],

          axisTick: {
            show: false,
          },
          axisLine: {
            show: false, //坐标轴线
          },
          splitLine: {
            show: false, //分隔线。默认数值轴显示，类目轴不显示。
          },
          axisLabel: {
            textStyle: {
              color: "#999999", //坐标轴字体颜色
            },
          },
          axisLabel: {
            interval: 0,
          },
        },
        yAxis: {
          splitLine: { show: false },
          axisLabel: {
            textStyle: {
              color: "#999999", //坐标轴字体颜色
            },
          },
          axisTick: {
            show: false, //刻度尺
          },
          axisLine: {
            show: false, //坐标轴线
          },
          splitLine: {
            show: true,
            lineStyle: {
              // 使用深浅的间隔色color: ['#F5F5F5','#F0F0F0']
              color: "#F5F5F5",
            },
          },
          type: "value", //数值轴
        },
        series: [
          {
            type: "pictorialBar",
            symbolSize: ["130%", "100%"],
            symbolPosition: "center",
            z: 10,

            data: [
              {
                value: 2400,
                // Built-in type, can be 'circle', 'rect', 'roundRect', 'square', 'diamond', 'triangle', 'pin', 'arrow'.
                symbol: "triangle",
                itemStyle: {
                  color: "#357FFF",
                },
              },
              {
                value: 8800,
                // Built-in type, can be 'circle', 'rect', 'roundRect', 'square', 'diamond', 'triangle', 'pin', 'arrow'.
                symbol: "triangle",
                itemStyle: {
                  color: "#5AD8A6",
                },
              },
              {
                value: 6000,
                // Built-in type, can be 'circle', 'rect', 'roundRect', 'square', 'diamond', 'triangle', 'pin', 'arrow'.
                symbol: "triangle",
                itemStyle: {
                  color: "#5D7092",
                },
              },
              {
                value: 2000,
                // Built-in type, can be 'circle', 'rect', 'roundRect', 'square', 'diamond', 'triangle', 'pin', 'arrow'.
                symbol: "triangle",
                itemStyle: {
                  color: "#FFE364 ",
                },
              },
            ],
          },
        ],
      });
    },

    //第五页柱状折线图1
    flveBarAndLineEchart1(id) {
      echarts.init(document.getElementById(id)).setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        color: ["#FA8E01", "#357FFF"],
        legend: {
          data: ["增长率", "总计"],
          textStyle: {
            color: "#999",
          },
          right: "3%",
          itemWidth: 14,
        },
        xAxis: [
          {
            type: "category",
            data: ["2015", "2016", "2017", "2018", "2019"],
            axisPointer: {
              type: "shadow",
            },
            axisTick: {
              show: false, //刻度尺
            },
            axisLine: {
              show: true, //坐标轴线
            },
            splitLine: {
              show: false, //分隔线。默认数值轴显示，类目轴不显示。
            },
            axisLabel: {
              textStyle: {
                color: "#999999", //坐标轴字体颜色
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "亿千瓦时",
            nameTextStyle: {
              color: "#999",
            },
            min: 0,
            max: 8000,
            interval: 2000,
            axisLabel: {
              formatter: "{value} ml",
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                // 使用深浅的间隔色color: ['#F5F5F5','#F0F0F0']
                color: "#F5F5F5",
              },
            },
            axisLabel: {
              textStyle: {
                color: "#999999", //坐标轴字体颜色
              },
            },
          },
          {
            type: "value",
            name: "    %",
            nameTextStyle: {
              color: "#999",
            },
            min: 0,
            max: 80,
            interval: 20,
            axisLabel: {
              formatter: "{value} ml",
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                // 使用深浅的间隔色color: ['#F5F5F5','#F0F0F0']
                color: "#F5F5F5",
              },
            },
            axisLabel: {
              textStyle: {
                color: "#999999", //坐标轴字体颜色
              },
            },
          },
        ],
        series: [
          {
            name: "总计",
            type: "bar",
            data: [2800, 3100, 5000, 5200, 6100],
            itemStyle: {
              color: "#357FFF",
            },
            barWidth: 30, //柱状条宽度的百分比
          },
          {
            name: "增长率",
            type: "line",
            data: [2200, 4400, 6800, 6900, 6900],
            itemStyle: {
              color: "#FFAB3E",
            },
          },
        ],
      });
    },

    //第五页折线图1
    flveLineEchart1(id) {
      let data = [
        ["2000-06-05", 116],
        ["2000-06-06", 129],
        ["2000-06-07", 135],
        ["2000-06-08", 86],
        ["2000-06-09", 73],
        ["2000-06-10", 85],
        ["2000-06-11", 73],
        ["2000-06-12", 68],
        ["2000-06-13", 92],
        ["2000-06-14", 130],
        ["2000-06-15", 245],
        ["2000-06-16", 139],
        ["2000-06-17", 115],
        ["2000-06-18", 111],
        ["2000-06-19", 309],
        ["2000-06-20", 206],
        ["2000-06-21", 137],
        ["2000-06-22", 128],
        ["2000-06-23", 85],
        ["2000-06-24", 94],
        ["2000-06-25", 71],
        ["2000-06-26", 106],
        ["2000-06-27", 84],
        ["2000-06-28", 93],
        ["2000-06-29", 85],
        ["2000-06-30", 73],
        ["2000-07-01", 83],
        ["2000-07-02", 125],
        ["2000-07-03", 107],
        ["2000-07-04", 82],
        ["2000-07-05", 44],
        ["2000-07-06", 72],
        ["2000-07-07", 106],
        ["2000-07-08", 107],
        ["2000-07-09", 66],
        ["2000-07-10", 91],
        ["2000-07-11", 92],
        ["2000-07-12", 113],
        ["2000-07-13", 107],
        ["2000-07-14", 131],
        ["2000-07-15", 111],
        ["2000-07-16", 64],
        ["2000-07-17", 69],
        ["2000-07-18", 88],
        ["2000-07-19", 77],
        ["2000-07-20", 83],
        ["2000-07-21", 111],
        ["2000-07-22", 57],
        ["2000-07-23", 55],
        ["2000-07-24", 60],
      ];

      let dateList = data.map(function (item) {
        return item[0];
      });
      let valueList = data.map(function (item) {
        return item[1];
      });
      echarts.init(document.getElementById(id)).setOption({
        tooltip: {
          trigger: "axis",
        },
        grid: {
          top: "5%",
        },
        xAxis: [
          {
            axisTick: {
              show: false, //刻度尺
            },
            axisLine: {
              show: false, //坐标轴线
            },
            splitLine: {
              show: false, //分隔线。默认数值轴显示，类目轴不显示。
            },
            axisLabel: {
              textStyle: {
                color: "#999999", //坐标轴字体颜色
              },
            },
            data: dateList,
          },
        ],
        yAxis: [
          {
            splitLine: { show: false },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                // 使用深浅的间隔色color: ['#F5F5F5','#F0F0F0']
                color: "#F5F5F5",
              },
            },
            axisLabel: {
              textStyle: {
                color: "#999999", //坐标轴字体颜色
              },
            },
          },
        ],
        series: [
          {
            type: "line",
            showSymbol: false,
            lineStyle: {
              color: "#357FFF",
            },
            data: valueList,
          },
        ],
      });
    },

    //第五页多条柱状图1
    fiveMoreBarEchart1(id) {
      echarts.init(document.getElementById(id)).setOption({
        tooltip: {
          trigger: "axis", //坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
          axisPointer: {
            //坐标轴指示器配置项
            type: "cross", //十字准星指示器。其实是种简写，表示启用两个正交的轴的 axisPointer
            crossStyle: {
              color: "#999", //线的颜色
            },
          },
        },

        grid: {
          left: "14%",
          top: "8%",
        },
        color: ["#357FFF", "#FFE364", "#5D7092"],
        legend: {
          right: 10,
          data: ["第一产业", "第二产业", "第三产业"],
          textStyle: {
            color: "#999",
          },
          itemWidth: 14,
        },
        xAxis: [
          {
            type: "value",
            min: 0,
            max: 25000,
            interval: 5000,
            axisPointer: {
              type: "shadow",
            },
            axisTick: {
              show: false, //刻度尺
            },
            axisLine: {
              show: false, //坐标轴线
            },
            splitLine: {
              show: false, //分隔线。默认数值轴显示，类目轴不显示。
            },
            axisLabel: {
              textStyle: {
                color: "#999999", //坐标轴字体颜色
              },
            },
          },
        ],
        yAxis: [
          {
            type: "category",
            data: ["2015", "2016", "2017", "2018", "2019"],
            axisLabel: {
              formatter: "{value} ml",
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                // 使用深浅的间隔色color: ['#F5F5F5','#F0F0F0']
                color: "#F5F5F5",
              },
            },
            axisLabel: {
              textStyle: {
                color: "#999999", //坐标轴字体颜色
              },
            },
          },
        ],
        series: [
          {
            name: "第三产业",
            type: "bar",
            data: [4000, 7000, 10000, 11000, 12000],
            itemStyle: {
              color: "#5D7092",
            },
            barWidth: 10, //柱状条宽度的百分比
            barGap: "9%",
          },
          {
            name: "第二产业",
            type: "bar",
            data: [50000, 12000, 16000, 18000, 25000],
            itemStyle: {
              color: "#FFE364",
            },
            barWidth: 10, //柱状条宽度的百分比
            barGap: "9%",
          },
          {
            name: "第一产业",
            type: "bar",
            data: [4000, 7000, 9000, 11000, 12000],
            itemStyle: {
              color: "#357FFF",
            },
            barWidth: 10, //柱状条宽度的百分比
            barGap: "9%",
          },
        ],
      });
    },

    //第五页多折线图1
    fiveMoreLineEchart1(id) {
      echarts.init(document.getElementById(id)).setOption({
        tooltip: {
          trigger: "axis",
        },
        color: [
          "#357FFF",
          "#5AD8A6",
          "#FA8E01",
          "#FFE364",
          "#362D6D",
          "#95D8F8",
        ],
        legend: {
          data: [
            "石油加工、炼焦及核燃料加工",
            "化学原料及化学制品制造业",
            "非金属矿制品业",
            "黑色金属冶炼及压延加工业",
            "有色金属冶炼及压延加工业",
            "电力、燃气及水的生产和供应",
          ],
          textStyle: {
            color: "#999",
          },
          right: "3%",
          width: "100%",
          itemWidth: 10,
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          top: "35%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          axisPointer: {
            type: "shadow",
          },
          axisTick: {
            show: false, //刻度尺
          },
          axisLine: {
            show: false, //坐标轴线
          },
          splitLine: {
            show: false, //分隔线。默认数值轴显示，类目轴不显示。
          },
          axisLabel: {
            textStyle: {
              color: "#999999", //坐标轴字体颜色
            },
          },
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月",
          ],
        },
        yAxis: {
          type: "value",
          name: "万千瓦时",
          nameTextStyle: {
            color: "#999",
          },
          min: 0,
          max: 10000,
          interval: 2000,
          axisPointer: {
            type: "shadow",
          },
          axisTick: {
            show: false, //刻度尺
          },
          axisLine: {
            show: false, //坐标轴线
          },
          splitLine: {
            show: true,
            lineStyle: {
              // 使用深浅的间隔色color: ['#F5F5F5','#F0F0F0']
              color: "#F5F5F5",
            },
          },
          axisLabel: {
            textStyle: {
              color: "#999999", //坐标轴字体颜色
            },
          },
        },
        series: [
          {
            name: "石油加工、炼焦及核燃料加工",
            type: "line",
            data: [
              6400,
              6600,
              6550,
              6300,
              6200,
              6700,
              6150,
              6100,
              4500,
              4800,
              6200,
              6200,
            ],
            itemStyle: {
              color: "#357FFF",
            },
            showSymbol: false,
          },
          {
            name: "化学原料及化学制品制造业",
            type: "line",
            data: [
              8300,
              8600,
              8580,
              8200,
              8300,
              8600,
              8010,
              8300,
              8000,
              8100,
              8150,
              8150,
            ],
            itemStyle: {
              color: "#5AD8A6",
            },
            showSymbol: false,
          },
          {
            name: "非金属矿制品业",
            type: "line",
            data: [
              7950,
              8050,
              7950,
              8000,
              8050,
              7800,
              7900,
              6800,
              7100,
              7200,
              7600,
              7800,
            ],
            itemStyle: {
              color: "#FA8E01",
            },
            showSymbol: false,
          },
          {
            name: "黑色金属冶炼及压延加工业",
            type: "line",
            data: [
              4400,
              5800,
              3900,
              4400,
              5600,
              4400,
              4900,
              3900,
              4000,
              3400,
              4100,
              4000,
            ],
            itemStyle: {
              color: "#FFE364",
            },
            showSymbol: false,
          },
          {
            name: "有色金属冶炼及压延加工业",
            type: "line",
            data: [
              3800,
              2400,
              4200,
              3000,
              3900,
              3800,
              4000,
              4200,
              5000,
              4600,
              4000,
              2800,
            ],
            itemStyle: {
              color: "#362D6D",
            },
            showSymbol: false,
          },
          {
            name: "电力、燃气及水的生产和供应",
            type: "line",
            data: [
              1000,
              900,
              1100,
              1150,
              1200,
              1300,
              800,
              1100,
              1600,
              1700,
              1900,
              1000,
            ],
            itemStyle: {
              color: "#95D8F8",
            },
            showSymbol: false,
          },
        ],
      });
    },

    //第六页柱状折线图1
    sixBarAndLineEchart1(id) {
      echarts.init(document.getElementById(id)).setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        color: ["#FA8E01", "#357FFF"],
        legend: {
          data: ["电价", "成交量"],
          textStyle: {
            color: "#999",
          },
          right: "3%",
          itemWidth: 14,
        },
        xAxis: [
          {
            type: "category",
            data: ["2018/01", "2018/03", "2018/07", "2018/09", "2018/11"],
            axisPointer: {
              type: "shadow",
            },
            axisTick: {
              show: false, //刻度尺
            },
            axisLine: {
              show: true, //坐标轴线
            },
            splitLine: {
              show: false, //分隔线。默认数值轴显示，类目轴不显示。
            },
            axisLabel: {
              textStyle: {
                color: "#999999", //坐标轴字体颜色
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "亿千瓦时",
            nameTextStyle: {
              color: "#999",
            },
            min: 0,
            max: 40,
            interval: 10,
            axisLabel: {
              formatter: "{value} ml",
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                // 使用深浅的间隔色color: ['#F5F5F5','#F0F0F0']
                color: "#F5F5F5",
              },
            },
            axisLabel: {
              textStyle: {
                color: "#999999", //坐标轴字体颜色
              },
            },
          },
          {
            type: "value",
            name: "厘/千瓦时",
            nameTextStyle: {
              color: "#999",
            },
            min: 0,
            max: 800,
            interval: 200,
            axisLabel: {
              formatter: "{value} ml",
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                // 使用深浅的间隔色color: ['#F5F5F5','#F0F0F0']
                color: "#F5F5F5",
              },
            },
            axisLabel: {
              textStyle: {
                color: "#999999", //坐标轴字体颜色
              },
            },
          },
        ],
        series: [
          {
            name: "成交量",
            type: "bar",
            data: [14, 15, 25, 26, 31],
            itemStyle: {
              color: "#357FFF",
            },
            barWidth: 30, //柱状条宽度的百分比
          },
          {
            name: "电价",
            type: "line",
            data: [11, 22, 34, 35, 35],
            itemStyle: {
              color: "#FA8E01",
            },
            showSymbol: false,
          },
        ],
      });
    },

    //第六页饼图1
    sixPieEchart1(id) {
      echarts.init(document.getElementById(id)).setOption({
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        color: [
          "#FFE264",
          "#0081FE",
          "#7598B2",
          "#00DBAB",
          "#372D6C",
          "#79DAF9",
        ],
        series: [
          {
            name: "类型",
            type: "pie",
            radius: ["35%", "60%"],
            center: ["50%", "50%"],
            label: {
              color: "#999999",
            },
            data: [
              { value: 45, name: "用电用户" },
              { value: 10, name: "售电公司" },
              { value: 15, name: "火力发电企业" },
              { value: 10, name: "风力发电企业" },
              { value: 10, name: "光伏发电企业" },
              { value: 10, name: "其他发电企业" },
            ],
          },
        ],
      });
    },

    //第六页柱状图1
    sixBarTwo1(id) {
      echarts.init(document.getElementById(id)).setOption({
        color: ["#357FFF", "#5AD8A6"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        legend: {
          right: "5%",
          orient: "horizontal",
          data: ["用户获利", "售电公司获利"],
          textStyle: {
            color: "#999",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: ["2019/01", "2019/02", "2019/03", "2019/04", "2019/05"],
          axisTick: {
            show: false, //刻度尺
          },
          axisLine: {
            show: false, //坐标轴线
          },
          splitLine: {
            show: false, //分隔线。默认数值轴显示，类目轴不显示。
          },
          axisLabel: {
            textStyle: {
              color: "#999999", //坐标轴字体颜色
            },
          },
        },
        yAxis: {
          type: "value",
          name: "亿千瓦时",
          nameTextStyle: {
            color: "#999",
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              // 使用深浅的间隔色color: ['#F5F5F5','#F0F0F0']
              color: "#F5F5F5",
            },
          },
          axisLabel: {
            textStyle: {
              color: "#999999", //坐标轴字体颜色
            },
          },
        },
        series: [
          {
            name: "用户获利",
            type: "bar",
            stack: "总量",
            data: [1600, 3600, 5100, 6200, 7800],
            itemStyle: {
              color: "#357FFF",
            },
            barWidth: 35,
          },
          {
            name: "售电公司获利",
            type: "bar",
            stack: "总量",
            data: [400, 900, 1100, 1300, 1400],
            itemStyle: {
              color: "#5AD8A6",
            },
            barWidth: 35,
          },
        ],
      });
    },

    //第七页柱状图1
    sevenBarEchart1(id) {
      echarts.init(document.getElementById(id)).setOption({
        title: {},
        tooltip: {
          trigger: "axis", //坐标轴触发
          axisPointer: {
            type: "shadow", //阴影指示器
          },
        },
        legend: {
          data: [],
        },
        grid: {
          left: "3%", //左边距
          right: "10%",
          bottom: "3%",
          top: "10%",
          containLabel: true, //刻度标签,这常用于『防止标签溢出』的场景，标签溢出指的是，标签长度动态变化时，可能会溢出容器或者覆盖其他组件。
        },
        xAxis: {
          axisTick: {
            show: false, //刻度尺
          },
          axisLine: {
            show: false, //坐标轴线
          },
          splitLine: {
            show: false, //分隔线。默认数值轴显示，类目轴不显示。
          },
          axisLabel: {
            textStyle: {
              color: "#999999", //坐标轴字体颜色
            },
          },

          type: "value", //数值轴
          boundaryGap: [0, 0.01], //坐标轴两边留白策略
        },
        yAxis: {
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              // 使用深浅的间隔色color: ['#F5F5F5','#F0F0F0']
              color: "#F5F5F5",
            },
          },
          axisLabel: {
            textStyle: {
              color: "#999999", //坐标轴字体颜色
            },
          },
          // boundaryGap: true,//坐标轴两边留白策略
          boundaryGap: [0, 0.01], //坐标轴两边留白策略
          type: "category", //类目轴
          data: ["2015", "2016", "2017", "2018", "2019", "2020"],
        },
        series: [
          {
            type: "bar", //柱状图
            itemStyle: {
              barBorderRadius: [5, 5, 5, 5], //圆角
              normal: {
                barBorderRadius: [5, 5, 5, 5],
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0,
                    color: "#357FFF", //0%处的颜色
                  },
                  {
                    offset: 1,
                    color: "#66B6FF", //100%处的颜色
                  },
                ]), //柱状颜色渐变
              },
            },
            label: {
              show: true,
              position: "right",
              formatter: function (param) {
                if (param.name == "2020") {
                  return "{a|14.78% ↑}";
                } else if (param.name == "2019") {
                  return "{b|3.77% ↓}";
                } else if (param.name == "2018") {
                  return "{a|8.43% ↑}";
                } else if (param.name == "2017") {
                  return "{a|8.43% ↑}";
                } else if (param.name == "2016") {
                  return "{b|3.77% ↓}";
                } else if (param.name == "2015") {
                  return "{a|8.43% ↑}";
                } else {
                  return "--";
                }
              },
              rich: {
                a: {
                  color: "#FF6A6A",
                  lineHeight: 10,
                },
                b: {
                  color: "#59C143",
                },
              },
              color: "#FF6A6A",
            },
            data: [22000, 14000, 6000, 8000, 23000, 14000],
            barWidth: 10, //柱状条宽度的百分比
            barGap: "10%", //同一系列的柱间距离，默认为类目间距的20%，可设固定值
          },
        ],
      });
    },

    //第七页柱状图中的额外饼图
    sevenExtra1(id) {
      echarts.init(document.getElementById(id)).setOption({
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        color: ["#0081FE", "#FFE264"],
        series: [
          {
            name: "类型",
            type: "pie",
            radius: ["35%", "60%"],
            center: ["50%", "50%"],
            label: {
              color: "#999999",
            },
            data: [
              { value: 90, name: "内蒙古自治区" },
              { value: 10, name: "其他地区" },
            ],
            startAngle: 135, //起点位置
          },
        ],
      });
    },

    //第七页柱状折线图1
    sevenBarAndLineEchart1(id) {
      echarts.init(document.getElementById(id)).setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        color: ["#FA8E01", "#357FFF"],
        legend: {
          data: ["弃风率", "风电发电量"],
          textStyle: {
            color: "#999",
          },
          right: "3%",
          itemWidth: 14,
        },
        xAxis: [
          {
            type: "category",
            data: ["2015", "2016", "2017", "2018", "2019"],
            axisPointer: {
              type: "shadow",
            },
            axisTick: {
              show: false, //刻度尺
            },
            axisLine: {
              show: true, //坐标轴线
            },
            splitLine: {
              show: false, //分隔线。默认数值轴显示，类目轴不显示。
            },
            axisLabel: {
              textStyle: {
                color: "#999999", //坐标轴字体颜色
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "亿千瓦时",
            nameTextStyle: {
              color: "#999",
            },
            min: 0,
            max: 8000,
            interval: 2000,
            axisLabel: {
              formatter: "{value} ml",
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                // 使用深浅的间隔色color: ['#F5F5F5','#F0F0F0']
                color: "#F5F5F5",
              },
            },
            axisLabel: {
              textStyle: {
                color: "#999999", //坐标轴字体颜色
              },
            },
          },
          {
            type: "value",
            name: "    %",
            nameTextStyle: {
              color: "#999",
            },
            min: 0,
            max: 80,
            interval: 20,
            axisLabel: {
              formatter: "{value} ml",
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                // 使用深浅的间隔色color: ['#F5F5F5','#F0F0F0']
                color: "#F5F5F5",
              },
            },
            axisLabel: {
              textStyle: {
                color: "#999999", //坐标轴字体颜色
              },
            },
          },
        ],
        series: [
          {
            name: "风电发电量",
            type: "bar",
            data: [2800, 3100, 5000, 5200, 6100],
            itemStyle: {
              color: "#357FFF",
            },
            barWidth: 30, //柱状条宽度的百分比
          },
          {
            name: "弃风率",
            type: "line",
            data: [2200, 4400, 6800, 6900, 6900],
            itemStyle: {
              color: "#FFAB3E",
            },
            showSymbol: false,
          },
        ],
      });
    },

    //第七页饼图1
    sevenPieEchart2(id) {
      echarts.init(document.getElementById(id)).setOption({
        color: ["#357FFF", "#FFE364"],
        legend: {
          orient: "horizontal",
          right: 10,
          data: ["可再生能源", "不可再生能源"],
          textStyle: {
            color: "#999",
          },
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "22",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 75, name: "可再生能源" },
              { value: 25, name: "不可再生能源" },
            ],
            startAngle: 180, //起点位置
          },
        ],
      });
    },

    //第八页雷达图1
    eightRadarEchart1(id) {
      echarts.init(document.getElementById(id)).setOption({
        color: ["#357FFF", "#5AD8A6"],
        tooltip: {},
        legend: {
          data: ["内蒙古", "全国"],
          right: "3%",
          orient: "horizontal",
          textStyle: {
            color: "#999",
          },
          itemWidth: 14,
        },
        radar: {
          // shape: 'circle',
          name: {
            formatter: function (value) {
              let list = value.split("");
              let result = "";
              for (let i = 1; i <= list.length; i++) {
                if (!(i % 10) && list[i] != undefined) {
                  result += list[i - 1] + "\n";
                } else {
                  result += list[i - 1];
                }
              }
              return result;
            },
          },
          indicator: [
            { name: "单机60万千瓦及以上机组比例（％）", max: 100 },
            { name: "煤电供电标准煤耗（克/千瓦时）", max: 100 },
            { name: "光伏发电率（%）", max: 100 },
            { name: "单位GDP电耗（千瓦时）", max: 100 },
            { name: "电网综合线损率（%）", max: 100 },
            { name: "脱硝机组比例（%）", max: 100 },
            { name: "煤电供电标准煤耗（克/千瓦时）", max: 100 },
          ],
          nameTextStyle: {
            color: "#999",
          },
          radius: ["0%", "60%"],
          splitArea: {
            show: false,
          },
          splitNumber: 4,
        },
        series: [
          {
            type: "radar",
            // areaStyle: {normal: {}},
            data: [
              {
                value: [76, 18, 20, 61, 24, 39, 63, 40],
                name: "内蒙古",
                areaStyle: {
                  color: "rgba(71, 143, 248, 0.3)",
                },
                lineStyle: {
                  color: "#357FFF",
                },
                itemStyle: {
                  borderColor: "#357FFF",
                },
              },
              {
                value: [26, 4, 77, 78, 42, 24, 40, 32],
                name: "全国",
                areaStyle: {
                  color: "rgba(117, 220, 165, 0.6)",
                },
                lineStyle: {
                  color: "#5AD8A6",
                },
                itemStyle: {
                  borderColor: "#5AD8A6",
                },
              },
            ],
            symbolSize: 10,
          },
        ],
      });
    },

    //第八页折线图1
    eightLineEchart1(id) {
      let data = [
        ["2000-06-05", 116],
        ["2000-06-06", 129],
        ["2000-06-07", 135],
        ["2000-06-08", 86],
        ["2000-06-09", 73],
        ["2000-06-10", 85],
        ["2000-06-11", 73],
        ["2000-06-12", 68],
        ["2000-06-13", 92],
        ["2000-06-14", 130],
        ["2000-06-15", 245],
        ["2000-06-16", 139],
        ["2000-06-17", 115],
        ["2000-06-18", 111],
        ["2000-06-19", 309],
        ["2000-06-20", 206],
        ["2000-06-21", 137],
        ["2000-06-22", 128],
        ["2000-06-23", 85],
        ["2000-06-24", 94],
        ["2000-06-25", 71],
        ["2000-06-26", 106],
        ["2000-06-27", 84],
        ["2000-06-28", 93],
        ["2000-06-29", 85],
        ["2000-06-30", 73],
        ["2000-07-01", 83],
        ["2000-07-02", 125],
        ["2000-07-03", 107],
        ["2000-07-04", 82],
        ["2000-07-05", 44],
        ["2000-07-06", 72],
        ["2000-07-07", 106],
        ["2000-07-08", 107],
        ["2000-07-09", 66],
        ["2000-07-10", 91],
        ["2000-07-11", 92],
        ["2000-07-12", 113],
        ["2000-07-13", 107],
        ["2000-07-14", 131],
        ["2000-07-15", 111],
        ["2000-07-16", 64],
        ["2000-07-17", 69],
        ["2000-07-18", 88],
        ["2000-07-19", 77],
        ["2000-07-20", 83],
        ["2000-07-21", 111],
        ["2000-07-22", 57],
        ["2000-07-23", 55],
        ["2000-07-24", 60],
      ];
      let data2 = [
        ["2000-06-05", 60],
        ["2000-06-06", 66],
        ["2000-06-07", 50],
        ["2000-06-08", 46],
        ["2000-06-09", 30],
        ["2000-06-10", 30],
        ["2000-06-11", 25],
        ["2000-06-12", 30],
        ["2000-06-13", 34],
        ["2000-06-14", 36],
        ["2000-06-15", 38],
        ["2000-06-16", 36],
        ["2000-06-17", 34],
        ["2000-06-18", 38],
        ["2000-06-19", 42],
        ["2000-06-20", 45],
        ["2000-06-21", 44],
        ["2000-06-22", 46],
        ["2000-06-23", 52],
        ["2000-06-24", 78],
        ["2000-06-25", 79],
        ["2000-06-26", 106],
        ["2000-06-27", 110],
        ["2000-06-28", 113],
        ["2000-06-29", 114],
        ["2000-06-30", 106],
        ["2000-07-01", 102],
        ["2000-07-02", 99],
        ["2000-07-03", 98],
        ["2000-07-04", 93],
        ["2000-07-05", 88],
        ["2000-07-06", 82],
        ["2000-07-07", 86],
        ["2000-07-08", 87],
        ["2000-07-09", 78],
        ["2000-07-10", 60],
        ["2000-07-11", 63],
        ["2000-07-12", 88],
        ["2000-07-13", 107],
        ["2000-07-14", 131],
        ["2000-07-15", 111],
        ["2000-07-16", 87],
        ["2000-07-17", 88],
        ["2000-07-18", 88],
        ["2000-07-19", 99],
        ["2000-07-20", 83],
        ["2000-07-21", 111],
        ["2000-07-22", 57],
        ["2000-07-23", 55],
        ["2000-07-24", 60],
      ];

      let dateList = data.map(function (item) {
        return item[0];
      });
      let valueList = data.map(function (item) {
        return item[1];
      });
      let valueList2 = data2.map(function (item) {
        return item[1];
      });
      echarts.init(document.getElementById(id)).setOption({
        tooltip: {
          trigger: "axis",
        },
        grid: {
          top: "5%",
        },
        xAxis: [
          {
            axisTick: {
              show: false, //刻度尺
            },
            axisLine: {
              show: false, //坐标轴线
            },
            splitLine: {
              show: false, //分隔线。默认数值轴显示，类目轴不显示。
            },
            axisLabel: {
              textStyle: {
                color: "#999999", //坐标轴字体颜色
              },
            },
            data: dateList,
          },
        ],
        yAxis: [
          {
            splitLine: { show: false },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                // 使用深浅的间隔色color: ['#F5F5F5','#F0F0F0']
                color: "#F5F5F5",
              },
            },
            axisLabel: {
              textStyle: {
                color: "#999999", //坐标轴字体颜色
              },
            },
          },
        ],
        series: [
          {
            type: "line",
            showSymbol: false,
            lineStyle: {
              color: "#357FFF",
            },
            data: valueList,
          },
          {
            type: "line",
            showSymbol: false,
            lineStyle: {
              color: "#F7B500",
            },
            data: valueList2,
          },
        ],
      });
    },

    //第八页柱状折线图1
    eightBarAndLineEchart1(id) {
      echarts.init(document.getElementById(id)).setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        color: ["#FFAB3E", "#357FFF"],
        legend: {
          data: ["电力行业对GDP贡献率", "电力行业总产值"],
          textStyle: {
            color: "#999",
          },
          right: "3%",
          itemWidth: 14,
        },
        xAxis: [
          {
            type: "category",
            data: ["2015", "2016", "2017", "2018", "2019"],
            axisPointer: {
              type: "shadow",
            },
            axisTick: {
              show: false, //刻度尺
            },
            axisLine: {
              show: true, //坐标轴线
            },
            splitLine: {
              show: false, //分隔线。默认数值轴显示，类目轴不显示。
            },
            axisLabel: {
              textStyle: {
                color: "#999999", //坐标轴字体颜色
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "亿元",
            nameTextStyle: {
              color: "#999",
            },
            min: 0,
            max: 8000,
            interval: 2000,
            axisLabel: {
              formatter: "{value} ml",
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                // 使用深浅的间隔色color: ['#F5F5F5','#F0F0F0']
                color: "#F5F5F5",
              },
            },
            axisLabel: {
              textStyle: {
                color: "#999999", //坐标轴字体颜色
              },
            },
          },
          {
            type: "value",
            name: "        %",
            nameTextStyle: {
              color: "#999",
            },
            min: 0,
            max: 80,
            interval: 20,
            axisLabel: {
              formatter: "{value} ml",
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                // 使用深浅的间隔色color: ['#F5F5F5','#F0F0F0']
                color: "#F5F5F5",
              },
            },
            axisLabel: {
              textStyle: {
                color: "#999999", //坐标轴字体颜色
              },
            },
          },
        ],
        series: [
          {
            name: "电力行业总产值",
            type: "bar",
            data: [2800, 3100, 5000, 5200, 6100],
            itemStyle: {
              color: "#357FFF",
            },
            barWidth: 30, //柱状条宽度的百分比
          },
          {
            name: "电力行业对GDP贡献率",
            type: "line",
            data: [2200, 4400, 6800, 6900, 6900],
            itemStyle: {
              color: "#FA8E01",
            },
          },
        ],
      });
    },

    //第八页柱状折线图2
    eightBarAndLineEchart2(id) {
      echarts.init(document.getElementById(id)).setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        color: ["#FFAB3E", "#5AD8A6"],
        legend: {
          data: ["增速", "电力、热力、燃气及水的生产和供应"],
          textStyle: {
            color: "#999",
          },
          right: "3%",
          itemWidth: 14,
        },
        xAxis: [
          {
            type: "category",
            data: ["2015", "2016", "2017", "2018", "2019"],
            axisPointer: {
              type: "shadow",
            },
            axisTick: {
              show: false, //刻度尺
            },
            axisLine: {
              show: true, //坐标轴线
            },
            splitLine: {
              show: false, //分隔线。默认数值轴显示，类目轴不显示。
            },
            axisLabel: {
              textStyle: {
                color: "#999999", //坐标轴字体颜色
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "亿元",
            nameTextStyle: {
              color: "#999",
            },
            min: 0,
            max: 8000,
            interval: 2000,
            axisLabel: {
              formatter: "{value} ml",
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                // 使用深浅的间隔色color: ['#F5F5F5','#F0F0F0']
                color: "#F5F5F5",
              },
            },
            axisLabel: {
              textStyle: {
                color: "#999999", //坐标轴字体颜色
              },
            },
          },
          {
            type: "value",
            name: "        %",
            nameTextStyle: {
              color: "#999",
            },
            min: 0,
            max: 80,
            interval: 20,
            axisLabel: {
              formatter: "{value} ml",
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                // 使用深浅的间隔色color: ['#F5F5F5','#F0F0F0']
                color: "#F5F5F5",
              },
            },
            axisLabel: {
              textStyle: {
                color: "#999999", //坐标轴字体颜色
              },
            },
          },
        ],
        series: [
          {
            name: "电力、热力、燃气及水的生产和供应",
            type: "bar",
            data: [2800, 3100, 5000, 5200, 6100],
            itemStyle: {
              color: "#5AD8A6",
            },
            barWidth: 30, //柱状条宽度的百分比
          },
          {
            name: "增速",
            type: "line",
            data: [2200, 4400, 6800, 6900, 6900],
            itemStyle: {
              color: "#FA8E01",
            },
          },
        ],
      });
    },

    //第八页饼图1
    eightPieEchart1(id) {
      echarts.init(document.getElementById(id)).setOption({
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        legend: {
          data: ["东北", "华北", "华东", "宁夏", "陕西", "蒙古"],
          textStyle: {
            color: "#999",
          },
          right: "3%",
          itemWidth: 14,
        },
        color: [
          "#FFE264",
          "#0081FE",
          "#7598B2",
          "#00DBAB",
          "#372D6C",
          "#79DAF9",
        ],
        series: [
          {
            name: "类型",
            type: "pie",
            radius: ["35%", "60%"],
            center: ["50%", "50%"],
            label: {
              color: "#999999",
            },
            data: [
              { value: 45, name: "东北" },
              { value: 10, name: "华北" },
              { value: 15, name: "华东" },
              { value: 10, name: "宁夏" },
              { value: 10, name: "陕西" },
              { value: 10, name: "蒙古" },
            ],
          },
        ],
      });
    },

    //第八页柱状图1
    eightBarTwo1(id) {
      echarts.init(document.getElementById(id)).setOption({
        color: ["#357FFF", "#95D8F8"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        legend: {
          right: "5%",
          orient: "horizontal",
          data: ["交易电量", "非交易电量"],
          textStyle: {
            color: "#999",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          axisTick: {
            show: false, //刻度尺
          },
          axisLine: {
            show: false, //坐标轴线
          },
          splitLine: {
            show: false, //分隔线。默认数值轴显示，类目轴不显示。
          },
          axisLabel: {
            textStyle: {
              color: "#999999", //坐标轴字体颜色
            },
          },
        },
        yAxis: {
          type: "category",
          data: ["蒙西", "蒙东"],
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              // 使用深浅的间隔色color: ['#F5F5F5','#F0F0F0']
              color: "#F5F5F5",
            },
          },
          axisLabel: {
            textStyle: {
              color: "#999999", //坐标轴字体颜色
            },
          },
        },
        series: [
          {
            name: "交易电量",
            type: "bar",
            stack: "总量",
            data: [40, 70],
            itemStyle: {
              color: "#357FFF",
            },
            barWidth: 35,
          },
          {
            name: "非交易电量",
            type: "bar",
            stack: "总量",
            data: [40, 30],
            itemStyle: {
              color: "#95D8F8",
            },
            barWidth: 35,
          },
        ],
      });
    },

    //第八页雷达图3
    eightRadarEchart3(id) {
      echarts.init(document.getElementById(id)).setOption({
        color: ["#357FFF", "#5AD8A6"],
        tooltip: {},
        legend: {
          data: ["火电", "电网"],
          right: "3%",
          orient: "horizontal",
          textStyle: {
            color: "#999",
          },
          itemWidth: 14,
        },
        radar: {
          // shape: 'circle',
          name: {
            formatter: function (value) {
              let list = value.split("");
              let result = "";
              for (let i = 1; i <= list.length; i++) {
                if (!(i % 7) && list[i] != undefined) {
                  result += list[i - 1] + "\n";
                } else {
                  result += list[i - 1];
                }
              }
              return result;
            },
          },
          indicator: [
            { name: "行业工程师人数（个）", max: 100 },
            { name: "省级及以上科技项目数量（个）", max: 100 },
            { name: "科技项目投入（万元）", max: 100 },
            { name: "专利数量（个）", max: 100 },
          ],
          nameTextStyle: {
            color: "#999",
          },
          radius: ["0%", "60%"],
          splitArea: {
            show: false,
          },
          splitNumber: 5,
        },
        series: [
          {
            type: "radar",
            // areaStyle: {normal: {}},
            data: [
              {
                value: [70, 100, 42, 100],
                name: "火电",
                areaStyle: {
                  color: "rgba(71, 143, 248, 0.3)",
                },
                lineStyle: {
                  color: "#357FFF",
                },
                itemStyle: {
                  borderColor: "#357FFF",
                },
              },
              {
                value: [90, 81, 66, 42],
                name: "电网",
                areaStyle: {
                  color: "rgba(117, 220, 165, 0.6)",
                },
                lineStyle: {
                  color: "#5AD8A6",
                },
                itemStyle: {
                  borderColor: "#5AD8A6",
                },
              },
            ],
            symbolSize: 0,
          },
        ],
      });
    },

    //生命周期函数end
  },
};
</script>

<style lang="less" scoped>
.my-swipe .van-swipe-item {
  height: 280px;
  background: url("../assets/images/swipebg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.block1 {
  width: 85%;
  height: 100px;
  margin-top: 10px;
  background: #ffffff;
  box-shadow: 0 4px 6px 0 rgba(22, 45, 113, 0.1);
  border-radius: 4px;
  border-radius: 4px;
  .blockt1 {
    margin-top: 17px;
    margin-left: 15px;
    font-family: PingFangSC-Regular;
    font-size: 12px;
    color: #999999;
    letter-spacing: 0;
  }
  .blockt2 {
    margin-left: 15px;
    font-family: DINCond-Black;
    font-size: 28px;
    font-weight: bold;
    color: #333333;
    letter-spacing: 0.7px;
  }
  .blockt3 {
    margin-left: 15px;
    margin-top: 5px;
    font-family: PingFangSC-Regular;
    font-size: 10px;
    color: #357fff;
  }
  .blockt4 {
    margin-top: 5px;
    margin-left: 5px;
    font-family: PingFangSC-Regular;
    font-size: 12px;
    color: #ff6a6a;
  }
}
.title {
  padding-top: 30px;
  margin-left: 20px;
  font-size: 24px;
  color: #0f0d3a;
}
.menuImg {
  position: absolute;
  right: 0px;
  top: 10px;
  width: 24px;
  height: 24px;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0),
    rgb(255, 255, 255, 1)
  );
  img {
    width: 100%;
    height: 100%;
  }
}
/deep/.van-tabs--line .van-tabs__wrap {
  background: #ffffff;
}
/deep/.van-tabs__wrap--scrollable .van-tabs__nav--complete {
  margin-right: 20px;
}
.popView {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 10px 4% 35px 2%;
  .popItem {
    display: flex;
    flex-direction: column;
    width: 29%;
    height: 35px;
    font-family: PingFangSC-Medium;
    font-weight: bold;
    background: #f5f5f5;
    border-radius: 21px;
    margin-left: 2%;
    margin-top: 10px;
    font-size: 13px;
    color: #333333;
    text-align: center;
  }
}

.popTitle {
  font-family: PingFangSC-Medium;
  font-size: 18px;
  color: #333333;
  font-weight: bold;
  margin-top: 15px;
  margin-left: 4%;
}
.allEchart {
  width: 100%;
  height: 280px;
  margin: 0px;
  border: 1px solid #ddd;
  padding-top: 10px;
}
.echartTitle {
  width: auto;
  margin-left: 15px;
  padding: 20px;
  color: #0f0d3a;
  font-size: 16px;
  border-bottom: 1px solid #357fff;
}
.sixTxt {
  font-family: PingFangSC-Regular;
  font-size: 16px;
  color: #9e9dad;
  letter-spacing: 0;
}
.whiteBg {
  background: #ffffff;
}
.info1 {
  height: 60px;
  background: rgba(149, 216, 248, 0.2);
  border-radius: 2px;
  border-radius: 2px;
  margin: 0px 10px;
}
.info0-1 {
  height: 60px;
  background: rgba(149, 216, 248, 0.2);
  border-radius: 2px;
  border-radius: 2px;
  margin: 0px 10px;
  .txt0-1 {
    margin-top: 7px;
    margin-left: 15px;
    font-family: PingFangSC-Regular;
    font-size: 12px;
    color: #333333;
  }
  .txt0-2 {
    font-family: PingFangSC-Regular;
    font-size: 10px;
    color: #333333;
    letter-spacing: 0;
    label {
      font-family: DINCond-Black;
      font-size: 16px;
      font-weight: bold;
      color: #357fff;
      text-align: center;
    }
  }
  .txt0-3 {
    font-family: PingFangSC-Regular;
    font-size: 12px;
    color: #fd4319;
    text-align: center;
  }
}
.line {
  width: 1px;
  height: 20px;
  margin-top: 20px;
  background: #b9c9e5;
}
.line2 {
  width: 1px;
  height: 20px;
  background: #b9c9e5;
}
.txt1 {
  font-family: PingFangSC-Regular;
  font-size: 10px;
  color: #666666;
  text-align: center;
  letter-spacing: 0;
  margin-top: 8px;
}
.txt2 {
  font-family: DINCond-Black;
  font-size: 24px;
  font-weight: bold;
  color: #357fff;
  text-align: center;
  margin-left: 30px;
}
.txt3 {
  font-family: PingFangSC-Regular;
  font-size: 10px;
  color: #357fff;
  margin-left: 23px;
  margin-top: 12px;
}
.txt4 {
  font-family: PingFangSC-Regular;
  font-size: 12px;
  color: #ff6a6a;
  margin-top: 12px;
  margin-left: 5px;
}
</style>
